Глубокое погружение в CSS Font Metrics и CSS Boxes

На этой картинке показаны 8 разных шрифтов, из которых первый и второйfont-awesomeЗначки, значок пользовательского шрифта, за которым следует остальная часть шрифтаAvenir,Trebuchet MS,Arial,Helvetica,Hiragino Sans GB,STXihei.Исходный код здесь. Из этих персонажейfont-size:100pxНо не та же учетная высота. Некоторые из 100 пикселей, некоторые больше 100 пикселей. Далее видно, что вертикальное направление не отцентровано.

• fontПринцип работы и метрики
• CSS box modelsтип, определение

метрики шрифта

Чтобы понять ответ на поставленный выше вопрос, нужно начать со шрифтов:
мы вывозимAvenir,Helvetica,Hiragino Sans GBТри шрифта для анализа

Как видно из рисунка выше, когда мы устанавливаемfont-size:100px, высоты, занимаемые текстом, равны137px,115pxа также100px.
感觉有点懵啊。 какfont-size:100px
EM Square

правила определения шрифта

• Высота букв называется "em», цифровыми шрифтамиem- это цифровой объем пространства.emразмер (следующее записывается как:EM size)как правило1000единиц, в шрифтах TrueType,EM sizeУсловное обозначение представляет собой степень числа 2, обычно 1024 или 2048.
• В зависимости от единиц, в которых он фактически используется, размеры шрифтов могут основываться на некоторыхнастраиватьРешать.注意，有些值是em-square之外的值。
• В браузерах относительные единицы используются для масштабирования в соответствии с желаемымfont-size

настройки шрифта

Это легенда, подробно объясняющая настройки шрифта, значение каждого атрибута на рисунке:

• baseline (исходный уровень): отдельныйascentа такжеdescent, По умолчанию символ днаbaselineРасполагаются, как показано в P, x, Ё (для русских символов)
• ascent (ростascentfont-familyПринимать решение
• descent (отклонитьdescentfont-familyПринимать решение
• xHeight (): символы нижнего регистраxВысотаfont-familyПринимать решение
• capHeight (Верхняя высота): более крупные символыPвысота, поfont-familyПринимать решение
• lineSpacing (Межстрочный интервал): в браузере нормальноlineSpacing = ascent + descent
• lineHeight(высота строки): по умолчанию равноlineSpacing,кline-heightнастройка влияет, если установленаline-height,lineHeightравныйline-height.
• half-leading (половинный межстрочный интервал): еслиlineHeight > lineSpacing,ноlineHeightа такжеlineSpacingБудет производить междуравные вверх и внизVoid (lineHeight - lineSpacing) / 2 указанополовинный межстрочный интервал(half-leadingилиhalf lead strips).

Расчет высоты, занимаемой персонажами

Итак, после понимания вышеизложенных концепций вы можете ответить, почемуfont-size:100pxКогда это другая проблема.
Сначала загрузите профессиональное программное обеспечение для шрифтов.FontForge, программа работает наxquartz, поэтому вам нужно установить оба.

Облачный канал Baidu

После установки начинаем сAvenirПример шрифта для анализа.

• EM sizeдля1000
• ascentдля1000,descentдля366
• capHeightдля708
• xHeightдля468

это означаетAvenirЕдиницы шрифта в 1000EM sizeиспользуется в1000 + 366font-size:100px100px * (1000 + 366 ) ≈ 137px.
Эта расчетная высота определяетСодержимое элемента (область содержимого)высота эквивалентнаbackgroundАтрибуты.

CSS box models

Далее мы выглядим глубоко,CSS box models.你可能不知道什么CSS box models, но вы можете не поверить в это. На самом деле я боюсь, что самый распространенныйCSS box models.

Блочная коробка/содержащая коробка

Например, если есть простой текст, может быть несколько столбцовbox. то этот абзац называетсяContaining BoxПричина, по которой он так назван, вероятно, потому, что он содержит многоboxБар. (Ха...) Конечно, вы также можете назвать этоBlock Box, потому что онКусок. Проще говоряContaining Boxа такжеBlock Box

Inline Box (в поле)

Inline Box. ЭтиBoxНе какBlock Box

В приведенном выше примере<em/>курсивный элементявляется типичнымInline Box.

Анонимная встроенная коробка

Inline BoxСталAnonymous inline Box.

всеInline BoxсуществуетContaining Boxрасположенные рядом друг с другом, они образуютLine Box. должны знать о том,Line BoxНевозможно увидеть прямо.

Content area

Content areaвокруг текстаневидимая рамка. И мы также доказали в разделе о измерении шрифта, что его высота даетсяfont-sizeПринимать решение.

Более подробные определения и описания можно найти в спецификации CSS 2.1.визуальная модель форматирования(Visual formatting model) раздел для чтения.
Китайская станция|Официальный сайт W3C

Inline Boxа такжеLine Box

Как Inline Box влияет на Line Box

Line boxвысота наLine Boxсамый высокий вInline Box(илиReplaced Element)Конечно.
самый высокийInline Boxможет бытьAnonymous Inline Box.

Это может быть и повышение.line-heightизInline Box. Из-за увеличенияline-heightboxвыше.

font-sizeизInline BoxInline BoxInline Boxвыше.

В зависимости от браузера на него также может повлиять верхний или нижний индекс. потому что некоторые браузерыLine boxСпособ представлятьливые элементы наверху.

Мы можем установить<sup/>,<sub/>изline-height0, чтобы решить эту проблему.

sub, sup { line-height: 0; }

Inline Boxможет быть предметомReplaced Element(Такие как:<img/>,<input/>,<svg/>) Влияние.

Inline Box разрывает Line Box

Как мы можем видеть,Line Boxдобавит все встроенныеInline Boxвысота.

Однако иногдаInline Boxчасть его лопнетLine Boxсверху или снизу. Например, у кого естьpadding,margin,borderизInline Box. из-заInline BoxВысота не может быть задана (если задана, то тоже зря). Таким образом, он будет отображаться выше и ниже элементаpadding,margin,borderНо не влияетLine Box.
Уведомление:дляReplaced Element,inline-blockpadding,margin,borderЭто увеличит высоту, поэтомуLine BoxТакже повлияет высота.

Браузер будет отображать документы в том порядке, в котором они представленыLine Box. Итак, в последующих строкахborderМожет переопределитьborderи текст.

Справочная статья
элементы макета в вертикальном направлении линии


Deep dive line-height