Почему мои нижние элементы обрезаются при использовании CSS @ font-face?

Я использую API веб-шрифтов Google для встраивания Droid Sans на страницу. Все в порядке, за исключением нижних элементов (т. Е. Болтающихся бит на y, g и т. Д.). Последние версии Firefox, IE и Chrome на моем компьютере с Windows Vista сокращают дно.

<!DOCTYPE html>
<html>
<head>
 <title>Droid sans descender test</title>
 <meta charset="utf-8">
 <link href="http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold" rel="stylesheet" type="text/css">
 <style type="text/css">
  body { font-size: 16px; font-family: "Droid Sans", sans-serif; }
  h1, h2, h3 { margin: 1em 0; font-weight: normal; }
  h1 { font-size: 2em; }
  h2 { font-size: 1.5em; }
  h3 { font-size: 1em; }
 </style>
</head>    
<body>
 <h1>A bug ran under the carpet anyway</h1>
 <h2>A bug ran under the carpet anyway</h2>
 <h3>A bug ran under the carpet anyway</h3>
</body>
</html>

Приведенный выше код выглядит так:

Десендеры обрезаются
(источник: thinkdrastic.net)

Я пробовал line-height, font-size, padding и т. Д. Безрезультатно. У меня был некоторый успех с font-size-adjust, но в последний раз я проверял только Gecko. Кто-нибудь знает, как это исправить?


css font-face
person Olly Hodgson    schedule 03.06.2010    source источник
comment
Прекрасно работает на MacOS WebKit. Вы пробовали давать больший запас?   -  person Jakub Hampl    schedule 03.06.2010
comment
Ага. Я подозреваю, что это будет один из тех, как Windows задает вопросы.   -  person Olly Hodgson    schedule 03.06.2010
comment
Это может быть просто ошибка копирования и вставки, но font-family: "Droid Sans"sans-serif; нужна запятая.   -  person kevingessner    schedule 03.06.2010
comment
@kevingessner Хороший улов. Для простоты я вырвал все резервные шрифты, но удалил слишком много :)   -  person Olly Hodgson    schedule 03.06.2010

Ответы (8)


arrow_upward
12
arrow_downward

С некоторой помощью @adamliptrot я обнаружил, что Нисходящие элементы Droid Sans абсолютно хороши при нескольких точных размерах пикселей: 18, 22 и 27 пикселей. Я соответствующим образом скорректировал свои em:

h1 { font-size: 1.6875em; }
h2 { font-size: 1.375em; }
h3 { font-size: 1.125em; }

Не идеально, но работает:

Десендеры работают!
(источник: thinkdrastic.net)

person Olly Hodgson    schedule 03.06.2010
comment
Это, вероятно, означает, что что-то снова выйдет из строя при любом увеличении или на дисплее с нестандартным разрешением. - person Mark Ransom; 21.06.2010
comment
Вроде нормально работает при разных уровнях масштабирования. Учитывая, что это лишь незначительный визуальный сбой, который случается только в Windows, и в данном случае это интрасеть с довольно однородной аппаратной настройкой, я слишком не беспокоюсь. Конечно, есть на что обратить внимание :) - person Olly Hodgson; 22.06.2010
comment
Была ли та же проблема со шрифтом 'Walkway', и магическая цифра 1.6875em тоже работала для этого ... странная систематическая ошибка - person Andiih; 16.11.2011

arrow_upward
5
arrow_downward

Хотя ваш вопрос касается API веб-шрифтов Google, принцип моего ответа ниже тот же.

Если потомки обрезаются при обслуживании шрифта TrueType, наиболее вероятной причиной является неправильная (отрицательная) установка метрик OS / 2 для шрифта.

Значения, которые могут потребовать корректировки, - это WinAscent и WinDescent.

Быстрое и грязное решение - отрегулировать их до 0.

Это можно сделать с помощью Font Forge. После открытия шрифта в FontForge вы можете получить доступ к этим параметрам через 'Font Info' диалог.

person uniquelau    schedule 10.05.2012
comment
Похоже, это не сработало для меня. Я успешно изменил эти показатели в fontforge, но проблема не устранена. - person wprater; 29.05.2012
comment
Вы можете прислать мне шрифт, я посмотрю, почему он не работает. - person uniquelau; 31.05.2012
comment
Это только помогло мне найти проблему со шрифтом, который я создал с помощью MyScriptFont.com. Для метрики OS / 2 задано неверное значение. Спасибо. - person Urs; 02.02.2017

arrow_upward
3
arrow_downward

Я проверил указанные ttf-файлы, и даже в средстве просмотра шрифтов Windows вырезаются нижние элементы. Кажется, проблема больше связана с обслуживаемым шрифтом, чем с вашими стилями.

person Community    schedule 03.06.2010
comment
Так они и поступают. Интересно, проблема в шрифтах или в рендеринге шрифтов Windows? - person Olly Hodgson; 03.06.2010

arrow_upward
3
arrow_downward

Если вы используете Font Squirrel, похоже, что проблема с вариантом без засечек решена, но проблема остается с вариантом с засечками Font Squirrel.

Чтобы исправить вариант с засечками, перейдите в генератор веб-шрифтов и загрузите нужные файлы шрифтов (не полагайтесь на пакет, который они предоставляют).

Щелкните переключатель «Эксперт», оставьте все настройки, но в разделе «Дополнительные параметры» измените значение «Em Square Value» на «2162» и сгенерируйте шрифт.

Это правильно отображает шрифт при всех размерах.

person Danimal Holland    schedule 12.04.2013
comment
Это не решило проблему для меня. У меня была проблема на 14,8-15,2 пикселей (IE) / 15,0 - 15,1 пикселей (Chrome, Firefox) с Open Sans. Эта проблема сохранялась даже после установки значения em-квадрата от 2048 до 2162. Возможно, попытка даже большего значения могла бы сработать, но я полагаю, что я предпочту просто избегать проблемного диапазона. - person Mike Fuchs; 20.04.2015

arrow_upward
1
arrow_downward

у нас была такая же проблема ... мы пробовали использовать font squirrel. мы пробовали использовать веб-шрифты Google. Шрифт все время обрезал "висящие" буквы вроде g. Кроме того, версия, размещенная в Google, не выглядела такой верной и понятной, как другие. Шрифт казался немного нестабильным.

Наше решение:

Мы сами разместили шрифт, не форматируя его для Интернета. Затем мы преобразовали ttf-файл в форматы svg, .eot и .otf и загрузили их в качестве исправлений для IE, Mozilla и т. Д.

person mastawebb    schedule 16.12.2011

arrow_upward
0
arrow_downward

Если подсказка вверху - меняем font-size на ....

h1 { font-size: 1.6875em; }
h2 { font-size: 1.375em; }
h3 { font-size: 1.125em; }

не работает для вас, тогда добавьте "line-height" к элементу, который отсекает нижние элементы. ``

person chaser7016    schedule 31.05.2012
comment
Интересно. line-height у меня совсем не сработало, но с определенными размерами пикселей. Эти em размера могут быть не совсем подходящими для вас, если у вас другой базовый размер шрифта. - person Olly Hodgson; 31.05.2012

arrow_upward
0
arrow_downward

Я просто догадываюсь, но у меня была такая же проблема, когда заменялись шрифты. Мне просто интересно, происходит ли это, когда говорят, что замена шрифта заменяет шрифт 1024em на шрифт 1000em или наоборот. У меня было несколько серьезных обрезаний нисходящего элемента с использованием шрифта 2048em. Возможно, стоит исследовать.

person Beathoven    schedule 20.02.2016

arrow_upward
-2
arrow_downward

У меня была аналогичная дилемма, и у меня сработало исправление высоты строки (т.е. я добавил этот код в раздел Custom CSS):

h2 { line-height: 140%; }
person Jeremy Gregg    schedule 23.12.2014