Web-Kit и субпиксельные значения, обходной путь?

Я заметил, что браузеры Web-kit, такие как Chrome и Safari (Windows), стремятся округлять значения em до ближайшего пикселя, в то время как Firefox, IE,? Опера? можно использовать субпиксельные значения. Обычно это не большая проблема, но когда я использую em для точного выравнивания межбуквенного интервала или использую тени текста для последовательного эффекта в разных разрешениях клиента, это вызывает у меня головную боль. Посмотрите в следующем тестовом примере.

Вы увидите, что в FF даже самые маленькие буквы все еще имеют тень, а Chrome округляет значение em до нуля, а первые два абзаца не имеют тени.

РЕДАКТИРОВАТЬ Это не о единицах. Если вы замените 0.03em на 0.9, 0.8, 0.7.. px FF будет отображать все меньшую и меньшую тень, а когда Chrome опустится ниже 1px, он внезапно ничего не отобразит.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="bg" xml:lang="bg" xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <style type="text/css">body {font-size: 18px;} p {color: cyan; text-shadow: -0.03em -0.03em 0 rgb(0, 0, 0);}</style>
</head>
<body>

<p style="font-size:1em">No Shadow Test</p>
<p style="font-size:1.5em">No Shadow Test</p>
<p style="font-size:2em">Test</p>
<p style="font-size:2.5em">Test</p>
<p style="font-size:3em">Test</p>
<p style="font-size:3.5em">Test</p>
<p style="font-size:4em">Test</p>
<p style="font-size:4.5em">Test</p>
<p style="font-size:5em">Test</p>

</body>

</html>
Источник

3 ответа

Проблема в том, что Chrome не будет размещать текст и тени от текста с шагом в субпиксель, поэтому он округляется до ближайшего пикселя.

Вы можете увидеть тот же эффект с letter-spacing где firefox будет разрешать нецелые значения в пикселях, в то время как chrome округляет ближайший пиксель.

Источник

Первое, что я хотел бы предложить, это то, что вы используете ex Единицы для координат Y и значения высоты как шрифты могут иметь отдельную высоту x. Это может помочь изогнуть ошибки округления в вашу пользу, но, вероятно, нет. В худшем случае это, по крайней мере, точный шрифт.

Во-вторых, к сожалению, я не могу найти какую-либо ссылку в спецификации, которая говорит, что браузер должен в этом случае, поэтому мы видим различия? Если я ошибаюсь, вы всегда можете сообщить об ошибке команде webkit?

Что касается решения, я могу только предложить вам определить лучший путь в этом случае. Думайте об этом как о том, что IE не поддерживает text-shadow, Если округление не удалось, оно не появится. Затем примите решение о своем дизайне на основе этой позиции.

Я лично использую пиксели для вещей, которые, как я знаю, могут иметь ошибки округления, такие как тени и границы.

Источник

Я бы не советовал им. Я бы использовал px (пикселей). Вот конвертер EM в PX: http://convert-to.com/446/pixels-px-to-em-conversion.html

PX одинаков во всех браузерах (насколько я знаю)

Источник
Другие вопросы по тегам