@ font-face и line-height проблема - PullRequest
Новая
       8

@ font-face и line-height проблема

1 голос
/ 16 июня 2011

Изображение ниже отображает результат для: 

div.test { background: #00F; font-size: 50px; line-height: 50px; color: #FFF; margin: 50px 0; font-family: Wiesbaden; }

Один использует Wiesbaden (который является font-face), а другой без. font-face шрифт, кажется, игнорирует свойство line-height.

screenshot

Это проблема шрифта или шрифта?

Ответы [ 4 ]

5 голосов
/ 16 июня 2011

Свойство line-height указывает только вертикальное расстояние между началом одной строки и началом следующей.Если вы набрали что-то, что занимало две строки, начало 2-й строки должно быть в той же вертикальной позиции, используя любой шрифт.

Похоже, именно так выглядит ваш шрифт 'font-size: 50px».Если вы хотите, вы можете увеличить font-size, сохраняя line-height: 50px, чтобы исправить его.

2 голосов
/ 17 июня 2011

Короче говоря, это тоже не проблема.Они ведут себя именно так, как они должны быть.Видишь твой синий фон?Это ваша высота линии.Высота строки не влияет на сам шрифт, а скорее на расстояние между строками текста.

Некоторые шрифты имеют разные размеры, даже если установлены одинаковые значения font-size.Это способ отображения глифов.Если вы хотите, чтобы ваш текст был больше, увеличьте размер шрифта.Если вы хотите, чтобы резервные копии были одинакового размера, вы можете использовать шрифты одинакового размера (обратитесь к «Генераторам стека шрифтов» за справкой по этому вопросу) или проверьте свойство CSS3 font-size-adjust (обратите внимание, чтоэто CSS3, так что вам стоит перепроверить его поддержку).

1 голос
/ 16 июня 2011

У меня была похожая проблема, но я использовал скрипт Cufon вместо fontface, чтобы избежать проблем с браузерами.Чтобы решить мою проблему с высотой строки, я изменил тип документа с переходного на строгий.Попробуйте это.

0 голосов
/ 06 января 2013

Следующая скрипта иллюстрирует различия между 4 шрифтами (3 - очень распространенные шрифты, найденные на Mac, ПК и т. Д.). Одним из них является Google-шрифт. Независимо от того, 4 шрифта - четыре разных результата. Если дизайн будет сильно полагаться на «нестандартный» шрифт, убедитесь, что запасные варианты не взорвет все это.

Обратите особое внимание на различия в:

  • верхний интервал между прописной буквой Q и границей ее родителя
  • различные высоты Xx (особенно строчные и прописные)
  • потомок строчной буквы G (некоторые на самом деле выходят из родитель)

_ http://jsfiddle.net/suK2U/

Four fonts - Four results

...