Чему на самом деле соответствует размер шрифта?

я пытаюсь найти, какое значение установлено в font-size CSS свойство соответствует.

чтобы дать контекст, я хочу получить в CSS размер в em частей шрифта (выше высоты капитала и под базовой линией), которые я знаю из его метрик OS/2. The em единица относительно заданного font-size и метрики OS/2 относительно em-квадрата.

чего я ожидал

мои ожидания основаны на следующем ссылки на литературу. Я не нашел ничего более ясного и точного.

  1. по словам ссылка W3C для font-size в CSS2.1, и, как указано во всех вопросах переполнения стека, которые я нашел по этой теме (здесь, здесь и здесь):

    размер шрифта соответствует квадрату em, концепции, используемой в типографии. Заметьте, что определенные глифы могут кровоточить вне их квадраты.

  2. после нескольких знаний, которые у меня есть в типографии,em square весь квадратный метрик шрифта, в котором по возрастанию, по убыванию, пробелы, (и т. д...) линии определены. В Метрике OS/2 em square - это размер самого шрифта (часто 1000 или 2048 UPM).

    единственное объяснение, которое я нашел от W3C, находится в старая ссылка с 1997 года для CSS1, и это согласуется с современное цифровое определение em square Я использую:

    определенные ценности, такие как метрики ширины, выражаются в единицах, относительных к абстрактному квадрату, чья высота-это расстояние между строками в такого же размера типа. Эта площадь называется Площадь им. (...) Общие значения: 250 (Intellifont), 1000 (Тип 1) и 2048 (TrueType).

поэтому, если я правильно понимаю эти ссылки,значение указано в font-size следует использовать для генерации весь em square шрифта, и мы должны иметь возможность рассчитать размер части шрифта из размера шрифта и метрик.

например, с...

.my-letter {
    font-family: 'Helvetica Neue';
    font-size: 100px;
    text-transform: uppercase;
}

... у нас должен быть em square of 100px, а потому Helvetica Neue имеет столичную высоту 714 / 1000 (sCapHeight в таблице OS/2), капитальная высота 71.4px.

Expected Letter

что на самом деле происходит.

созданный em square is больше чем font-size (проверено на последних версиях Chrome, Firefox и Safari для Mac). Сначала я подумал, что у браузера есть другое определение em square и было часть буквы, равную font-size, но я не нашел никаких метрик OS/2 (С или без ascender, descender, gaps...) тот матч с ним.

Rendered Letter

вы можете ознакомиться это CodePen. Обратите внимание, что я использую line-height: 1; чтобы выделить ожидаемый размер, но моя проблема с font-size ("визуализированные чернила"), а не line-height (поле "столкновение"). Это то, что я должен уточнить, потому что меня уже несколько раз неправильно понимали. line-height - это не проблема.


Итак, у меня три вопросы:

  • правильно ли я понял ссылки W3C, или я предполагаю, что эти ссылки не сказали?
  • если нет, то почему сгенерированный шрифт имеет em-квадрат больше, чем font-size?
  • самое главное: как я мог знать размер отображаемого em-квадрата (относительно font-size) ?

Спасибо за помощь.

2 ответов


ваше понимание ссылок W3C является правильным, но ваше понимание красного ящика-нет.

Красное поле не изображает em-квадрат. Его высота-это сумма восхождения и спуска из метрик.


прочитайте его статью: это действительно помогает Al lot понять размеры шрифта:

http://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align#lets-talk-about-font-size-first