Шрифт пикселей vs points?

Question

Я беру спецификации дизайнеров и преобразовываю их в HTML/CSS. Я все-таки сталкиваюсь с одной и той же проблемой - дизайнер будет специфицировать прямоугольник с некоторым текстом, центрированным по вертикали в нем. Он задает высоту прямоугольника в 36 пикселей, а шрифт - 18 пикселей. Я создам 36-пиксельный DIV без рамки и 9-пиксельной надстройки (используя встроенную в бутстрап бокс-модель). Однако текст всегда слишком далек. Похоже, что текст больше 18 пикселей. Снимок экрана и измерение в Photoshop показывают, что текст имеет высоту 20 пикселей.

Я что-то упустил? Являются ли пиксели непоследовательными от экрана к экрану? Является ли пиксель шрифта отличным от пикселя экрана? Я читал, что шрифты должны быть в точках теперь для больших экранов DPI. Это имеет значение?

Answer 1

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

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

Кроме того, размер шрифта не включает высоту строки, которая по умолчанию добавляет примерно 20% высоты.

То, что я обычно использую для центрирования линии по вертикали в элементе, заключается в том, чтобы установить высоту линии на высоту элемента. Пример:

div { 
 
    background: #eee; 
 
    height: 50px; 
 
    line-height: 50px; 
 
}

<div>Text</div>

Answer 2

Пиксели отличаются от экрана к экрану. Пиксели на некоторых экранах больше, чем другие. На некоторых экранах больше пикселей, чем у других. Это может быть проблемой, особенно при определении width и height.

ex и em останутся неизменными (в относительном пространстве не фактический размер) независимо от размера экрана или количества пикселей.

Пример использования:

Height: 10ex; Width: 10ex;

This хорошая статья объяснить все это в глубину.

Answer 3

Шрифт 18px одного типа не обязательно имеет ту же высоту, что и 18px другого шрифта. У вас могут быть восходящие и descenders, которые могут сделать шрифт больше, но размер шрифта CSS не учитывает это. Поэтому нам нужно увидеть, какой шрифт вы используете, но попытка сосредоточиться на основе размера шрифта редко работает и ненадежна, если вы изменили шрифт на более поздний срок.