CSS: размер шрифта не точный?

Question

Итак, link и link дают подсказки о том, как шрифты зависят от реализации. Этот вопрос очень специфичен c к размеру шрифта в следующем случае:

размер шрифта: 50px; займет дополнительное пространство для рендеринга (60px в моем случае)

div {
  height: 50px;
  font-size: 50px;
  background: green;
}

span {
  background: red;
}

.lineheight {
  line-height: 50px;
}

<p>Green is 50px, Red is not</p>
<div><span>fg</span></div>

<p>You can still see the overflow without span:</p>
<div>jAaMgÁ</div>

<p>line-height does not solve the issue (just makes it prettier)</p>
<div class="lineheight"><span>jAaMgÁ</span></div>

• То, что я ожидаю, произойдет: восходящий и нисходящий в em квадрате
• То, что я получаю: спуск ничья вне em square.
• Из документации ссылка : "Размер шрифта соответствует em квадрату"
• Из этой ссылки квадрат em должен включать и по убыванию, и по возрастанию:

Так почему браузер делает что-то еще? Я пробовал Firefox и Chrome, и оба, похоже, соответствовали этому (мисс?) Поведению ... спецификация изменилась? если это так, Каков подходящий способ сообщить браузеру высоту шрифта, включая нисходящее и восходящее?

(ширину можно игнорировать, и вы можете использовать до CSS4, но CSS3 ценится)

Answer 1

Это не точно.

CSS3 внес несколько изменений, позволяющих использовать шрифты OpenType: link . Но также изменим, как работает размер шрифта:

• Размер шрифта CSS2 : Размер шрифта соответствует квадрату em.
• Шрифт CSS3- size : размер шрифта - это масштабный коэффициент, применяемый к единице EM шрифта.

Если ваш браузер поддерживает только CSS2, квадрат em будет точно то же самое, что и размер шрифта.

• Но благодаря поддержке CSS3 большинство браузеров теперь умножают размер шрифта на «единицу em» шрифта, которая отличается для каждый шрифт, но всегда> 1.

• В результате вы получите больший квадрат em, чем ожидалось, что является причиной неточности.

A быстрое грязное решение будет регулировать размер шрифта в соответствии с вашими потребностями:

  font-size-adjust:0.4; //equivalent to 1:1 ratio

Это позволит вам изменить «единицу измерения» шрифта, таким образом, высоту пролета без изменения размер шрифта.

div {
  height: 50px;
  font-size: 50px;
  background: green;
  font-size-adjust:0.4;
}

span {
  background: red;
}

.lineheight {
  line-height: 50px;
}

<p>Green is 50px, Red is 50px too</p>
<div><span>fg</span></div>

<p>Combine with line-height for best results</p>
<div class="lineheight"><span>fgjAaMgÁ</span></div>

Answer 2

Значение по умолчанию line-height выше font-size, поэтому span выше 50px в вашем примере. Если вы установите line-height на 1 или 100%, вы увидите, что span имеет ту же "реальную" высоту, что и div: 50px. Акцент на «A» просто превышает 100% высоты строки и выходит за рамки размера шрифта, как дополнение / исключение.

div {
  height: 50px;
  font-size: 50px;
  line-height: 1;
  background: green;
}

span {
  background: red;
}

Green and Red are 50px high, with line-height 100%:
<div><span>jAaMgÁ</span></div>
The only thing that overflows is the accent on the "A" (and the very first letter "j", but to the left...):
<div>jAaMgÁ</div>