взорваться
Недавно я просмотрел пользовательский интерфейс и обнаружил, что высота всех текстовых блоков на странице совершенно не соответствует высоте в черновом дизайне, и тут девушка с пользовательским интерфейсом взорвалась!
Я искал причину и обнаружил, что большая часть текста, разработанного в черновике дизайна пользовательского интерфейса,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-height
1,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, я обнаружил, что образцы в валовой уценке были перепутаны...
Почему установка высоты строки в соответствии с размером шрифта делает текст неполным?
Только здесь мы действительно вступаем в исследование глубоко укоренившейся причины.
Чтобы решить эту проблему, вам нужно сначала понять метрики шрифта и процитировать другие описания статей, как показано ниже:
Кратко поясняется следующим образом:
- мы устанавливаем
font-size
Высота на самом деле соответствует шрифтуEM square
часть - Шрифты могут быть разработаны так, чтобы выходить за рамки
EM square
часть - Актуальный дизайн шрифта и
EM square
При частичном соответствии,line-height:normal
а такжеline-height:1
равный - Как видно из приведенного выше рисунка,
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.
В заключение
-
line-height:normal
Значение связано со шрифтом, один и тот же шрифт отличается в разных средах. - Когда значение, установленное высотой строки, меньше значения по умолчанию, возникает проблема неполного отображения.
- По умолчанию normalize.css устанавливает высоту строки равной 1,15. Когда нормаль шрифта line-height больше 1,15, возникнет проблема с неполным отображением текста.
- Чтобы решить проблему несоответствия высоты строки шрифтов на разных платформах, необходимо подобрать максимальное значение normal на разных платформах в соответствии с конкретным шрифтом.
Кровавое дело и мышление, вызванное высотой строки
Публичный номер автора: