Кровавое дело и мышление, вызванное высотой строки

внешний интерфейс Microsoft редкоземельный CSS

взорваться

  Недавно я просмотрел пользовательский интерфейс и обнаружил, что высота всех текстовых блоков на странице совершенно не соответствует высоте в черновом дизайне, и тут девушка с пользовательским интерфейсом взорвалась!

   Я искал причину и обнаружил, что большая часть текста, разработанного в черновике дизайна пользовательского интерфейса,font-size:24px;line-height:24px,Чтобы не писать размер шрифта каждый раз при реализации кода, шрифт и размер шрифта задаются 24px непосредственно на корневом узле, а размер шрифта задается отдельно для мелких несогласованных частей, таким образом игнорируя настройкиline-heightэто высота шрифта. В результате высота строки, в которой расположен текст, выше, чем высота строки в черновике проекта.

Почему высота строки текста не равна размеру шрифта?

   перевернули высоту строкиОфициальное описание,Следующим образом:

  В документации указано, что значение высоты строки по умолчанию равноnormal,ДатьnormalРекомендуемая настройка для1.0到1.2之间. Эквивалентно тому, что если размер шрифта задан без высоты строки, то высота строки по умолчанию кратна размеру шрифта 1,0–1,2.

  Итак, что же это за кратность?

   Отследил его в хромированной консоли и увидел, что проект представилnormalize.cssдля инициализации стиля CSS браузера по умолчанию. Среди них установите htmlline-heightдля1.15.

Почему normalize.css по умолчанию устанавливает высоту строки на 1,15?

   полистал выдачи normalize.css на github и нашел ответ в issue 593, адрес по адресуздесь.

Общий процесс такой: кто-то обнаружил, что текст одного и того же шрифта и размера имеет несовместимые значения line-height в разных средах, потом кто-то провел тест на кроссбраузерном тестировании и пришел к выводу, что эта проблема действительно существует. , а разница очень большая

When the font size was 100px, the most common line height was 115px. However, results varied from 101px on Mac Firefox to 136px on Android Chrome.

  В конце концов, поскольку высота строки в большинстве случаев составляет 115 пикселей, чтобы решить проблему несоответствия высоты строки одного и того же шрифта и размера шрифта в разных средах, рекомендуется установить значение по умолчаниюline-height1,15

   Увидев это, я подумал о проблеме, так как показано, что установка высоты строки на 1,15 должна решить проблему совместимости среды. Так,почему бы не установитьline-height:1Не только решить проблему совместимости, но и решить проблему, связанную с тем, что увеличение высоты строки не соответствует проекту дизайна пользовательского интерфейса?.

Установить переполнение: проблема с отображением скрытого шрифта

   При установке текстаline-height:1После этого установите контейнер, в котором находится текстoverflow:hiddenЛегко воспроизвести проблему неполного отображения текста, например:

dphyTxg

код показывает, как показано ниже:

<span style="
font-size:100px;
line-height:1;
overflow:hidden;
border:1px solid #ddd;
display:inline-block">dphyTxg</span>

Примечание. Здесь вы можете использовать демонстрацию div, а затем удалить display:inline-block. Используя div, я обнаружил, что образцы в валовой уценке были перепутаны...

Почему установка высоты строки в соответствии с размером шрифта делает текст неполным?

  Только здесь мы действительно вступаем в исследование глубоко укоренившейся причины.

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

  1. исходный адрес
  2. Deep dive CSS: font metrics, line-height and vertical-align
  3. EM Square
  4. FontForge

Кратко поясняется следующим образом:

  1. мы устанавливаемfont-sizeВысота на самом деле соответствует шрифтуEM squareчасть
  2. Шрифты могут быть разработаны так, чтобы выходить за рамкиEM squareчасть
  3. Актуальный дизайн шрифта иEM squareПри частичном соответствии,line-height:normalа такжеline-height:1равный
  4. Как видно из приведенного выше рисунка,ascender+descender>Em Sizeкоторый1100+540>1000,В настоящее времяline-height:1.64, поэтому высота строки по умолчанию для текста размером 100 пикселей составляет 164 пикселя.

Анализ проб

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

h1

line-height:

код показывает, как показано ниже:

<h1 id="font" style="line-height:normal;font-size: 100px;font-family: 微软雅黑">h1</h1>
<p>line-height: <code id="o1" style="font-size: 50px"></code></p>
<script>
  document.getElementById('o1').textContent = window.getComputedStyle(document.getElementById('font')).height;
</script>

   Из приведенного выше видно, что Microsoft Yahei имеет размер 100 пикселей и отображается как 132 пикселя по высоте окна вниз. Проверьте в FontForge, так ли это.

   Как видно из рисунка выше, используйте(ascender+descender)/Em Size,который(2167+536)/2048≈1.32, то есть высота строки равна 1,32.

В заключение

  1. line-height:normalЗначение связано со шрифтом, один и тот же шрифт отличается в разных средах.
  2. Когда значение, установленное высотой строки, меньше значения по умолчанию, возникает проблема неполного отображения.
  3. По умолчанию normalize.css устанавливает высоту строки равной 1,15. Когда нормаль шрифта line-height больше 1,15, возникнет проблема с неполным отображением текста.
  4. Чтобы решить проблему несоответствия высоты строки шрифтов на разных платформах, необходимо подобрать максимальное значение normal на разных платформах в соответствии с конкретным шрифтом.

Кровавое дело и мышление, вызванное высотой строки

Публичный номер автора: