Что означает половина пикселя в свойстве CSS размера шрифта?

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

Меню заголовка сайта в настоящее время имеет следующие стили:

line-height: 1em;
font-size: 11px;

В одном из документов я получил там запрос на изменение, который требует от меня изменить эти стили на:

line-height: 1.2em;
font-size: 11.5px;

Я знаю, что EMs в порядке с десятичными значениями, но что означает половина пикселя в размере шрифта? Я попытался изменить размер шрифта с помощью инспектора с 12 до 11,5 и до 11, а изменение с 11 до 11,5 видно, но с 11,5 до 12 оно немного движется (я немного уменьшаю только интервалы, но он установлен на 1em во всех 3 примерах). Вы можете проверить снимки экрана ниже:

Итак, что означает эта половина пикселя в контексте веб-страницы? Является ли этот кросс-браузер и что делает этот пиксель размером 5 пикселей для размера шрифта?

Ответ 1

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

Пример:

<p style="display: inline-block; font-size: 12px; border : 1px red solid;">
aAa
</p>
<p style="display: inline-block; font-size: 11.8px; border : 1px red solid;">
aAa
</p>
<p style="display: inline-block; font-size: 11.5px; border : 1px red solid;">
aAa
</p>
<p style="display: inline-block; font-size: 11.2px; border : 1px red solid;">
aAa
</p>
<p style="display: inline-block; font-size: 11px; border : 1px red solid;">
aAa
</p>

Если мы увеличим до 500%, мы увидим, что есть разница:

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

Zoom 100%:

Круглый (12 * 1,00) = 12

Круглый (11,5 * 1,00) = 12

Увеличить 500%:

Круглый (12 * 5,00) = 60

Круглый (11.5 * 5.00) = 58

Ответ 2

Свойство font-size используется как параметр, когда браузер рисует символы, поэтому он влияет на размер глифов. Но когда глифы растеризуются в растровые изображения, эффект, скажем, увеличения font-size на 0.5px может исчезнуть. Браузеры могут выполнять растеризацию по-разному. Более того, они могут или не могут использовать субпиксельную визуализацию и по-разному.

Если для параметра line-height установлено значение 1em и font-size увеличено с 11.5px до 12px, тогда высота строки строки может оставаться неизменной или увеличиваться на один пиксель, в зависимости от округление, применяемое браузером.