Почему размер шрифта em не изменяется с типом шрифта?

Question

Размер элемента в em не изменяется с типом шрифта, как он изменяется для ex или ch. Даже жесткие разные типы шрифтов имеют разные размеры «М».

<div id="em1">Font Serif with em as units</div> 
<div id="em2">Font Sans-Serif with em as units</div> 

<div id="ex1">Font Serif with ex as units</div> 
<div id="ex2">Font Sans-Serif with ex as units</div> 

<div id="ch1">Font Serif with ch as units</div> 
<div id="ch2">Font Sans-Serif with ch as units</div> 
body { 
    padding: 20px; 
} 
#em1,#em2 { 
    width: 25em; 
    height: 40px; 
    background: orange; 
    margin: 20px; 
} 
#ch1,#ch2 { 
    width: 50ch; 
    height: 40px; 
    background: orange; 
    margin: 20px; 
} 
#ex1,#ex2 { 
    width: 50ex; 
    height: 40px; 
    background: orange; 
    margin: 20px; 
} 

#em1, #ex1, #ch1{ 
    font-family: Serif; 
} 

#em2,#ex2,#ch2 { 
    font-family: Sans-Serif; 
} 

Обратитесь к этому fiddle за дополнительной информацией. Вы можете заметить разные размеры Div для ch и ex с одинаковым размером ширины, но с другим типом шрифта, но это не так для em.

Answer 1

В CSS все измерения относятся к «единицам абсолютной длины» (px, in, cm, mm, pt, pc) и по умолчанию относятся к пикселю (который указан в CSS3 как 1/96th из 1 дюйма).

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

ex и ch являются уникальными для шрифтов идиосинкразии, но em «ы измеряется унаследованного размером шрифта элемента (всегда„абсолютная единица длины“- как правило, ссылки на единицу пиксела).

em unit: равный вычисленному значению свойства «font-size» элемента, на котором он используется (1.2em на 20% больше, чем определенный или унаследованный размер шрифта ... всегда в «единица абсолютной длины»).

Длина единицы измерения не изменяется при изменении семейства шрифтов, потому что em основывается на размере шрифта - который всегда основан на «абсолютной единице длины». Если размер шрифта не указан, значение по умолчанию - 16 пикселей.

ex unit: равный используемой высоте x первого доступного шрифта, значение одного элемента уникально для этого шрифта. Х-высота называется так потому, что она часто равна высоте нижнего регистра «x». Тем не менее, «ex» определен даже для шрифтов, которые не содержат «x». Я не могу придумать ни одного случая, когда это полезно.

ch unit: ширина символа 0 (ноль) - произвольно как ex измерение.

http://www.w3.org/TR/css3-values/#absolute-lengths

http://www.w3.org/TR/css3-values/#em-unit

Answer 2

em блок, с помощью definition, обозначает размер шрифта или, более технически, вычисленное значение font-size собственности. Часто говорят, что это означает, что шрифт высот, что правильно, правильно понято. Его часто называют шириной буквы «М», но это неверно; ширина каждой буквы для типографа, чтобы решить, и на практике, «М», как правило, значительно уже, чем размер шрифта, как простой эксперимент показывает:

<div style="width: 1em; height: 1em; outline: solid red">M</div>

Таким образом, em единица зависит только от размера шрифта, а не от семейства шрифтов, стиля и т. Д. Это - размер шрифта.

Единица измерения ex определена равной высоте строчных букв без вставок и десендеров. Это действительно круговое определение; возвышения - это вещи, которые простираются выше x-height. В типографии x-height является одним из основных свойств шрифта, характерным для дизайна шрифтов, а блок ex предназначен для отражения этого и отличается для разных шрифтов. Однако многие браузеры реализуют ex как половину размера шрифта, то есть 0.5em, что делает блок ex бесполезным.

Единица измерения ch определена как равная ширине цифры 0. Его название отражает идею о том, что это разумное приближение «средней ширины символа». Но в любом случае ожидается, что стоимость устройства будет варьироваться в зависимости от шрифта, и это произойдет.