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

ProgramBox

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

Post author:admin
Запись опубликована:19 мая, 2023
Post category:Вопросы по программированию

#css #subpixel

#css #подпиксель

Вопрос:

Я заметил, что браузеры Web-kit, такие как Chrome и Safari (Windows), имеют тенденцию округлять их значения до ближайшего пикселя, в то время как Firefox, IE, ? Opera? можно использовать подпиксельные значения. Обычно это не большая проблема, но когда я использую 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>

1. Я бы не стал полагаться на дизайн, идеальный для пикселей. Единственный способ их достижения — использовать изображение…

2. Мой дизайн — это все, но пиксель совершенен. Я нигде не использую пиксели.

3. em основано на высоте m с текущим размером шрифта. Поскольку это основано на пикселях, то и em .

4. @Blender: На самом деле, я думаю, вы имеете в виду, что это em основано на ширине заглавной буквы M в текущей начертании шрифта. Originally the unit was derived from the width of the capital "M" in the currently used typeface — Wiki . Вот почему вы должны использовать em для значений ширины и ex для значений высоты при использовании единиц измерения относительно шрифта для элементов.

5. @avok00: Что произойдет, если вы установите для него значение 1.2px, 1.6px и т.д.? Это подтвердило бы, что это действительно ошибка округления.

Ответ №1:

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

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

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

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

1. Спасибо! Хорошая запись, но я не знаю, являются ли единицы измерения проблемой. Пожалуйста, посмотрите мою правку.

2. @avok00: единственный совет, который я могу дать, уже содержится в моем ответе. Вы знаете, что webkit в некоторых случаях округляет до 0, поэтому использование пикселей в тех случаях, когда может произойти округление, вероятно, является лучшим вариантом.

3. На самом деле в очень низких разрешениях (телефоны) Мне понадобятся значения в 0,4 пикселя, например, что-то, что отображает FF / IE (меньше, чем значение 1 пиксель, не знаю как), а Web-kit — нет.

Ответ №2:

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

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

Ответ №3:

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

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

1. Пиксели относятся к разрешению экрана, в то время как ems относятся к размеру шрифта (размер шрифта также относится к самому начертанию / семейству шрифтов). Также обратите внимание, что «конвертеры» em в px предполагают тонну шрифта, обычно предполагая, что 16px = 1em, что не всегда так.

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

3. @Scott, сделай это тогда. Затем, когда вы сталкиваетесь с резкими изменениями экрана, такими как iPhone, при котором пиксели в области экрана удваиваются, не жалуйтесь, что вам приходится эффективно писать новую таблицу стилей. Честно говоря, я не пытаюсь начать здесь битву за пиксель против размера шрифта. Просто констатирую факты. Оба являются относительными единицами, вы выбираете, какой способ быть относительным. 🙂

4. @Scott: Также следует отметить, что на странице, на которую вы ссылаетесь, указано, что We use the px unit of measurement to define font size , а не you should use this cause it is the best way . Он предпочитает пиксели.

5. текст в 10 пикселей равен 10 пикселям, независимо от того, какое у вас разрешение, в этом весь смысл. И в любом случае, в настоящее время вряд ли найдется хоть один компьютер с разрешением меньше 1280хХХХ. Пиксельные шрифты придают наиболее согласованный вид, imo.