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

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

5 голосов
/ 14 апреля 2011

Я заметил, что браузеры 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 ]

3 голосов
/ 14 апреля 2011

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

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

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

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

3 голосов
/ 02 октября 2012

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

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

0 голосов
/ 14 апреля 2011

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

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

...