Почему мои спуски обрезаются при использовании CSS @ font-face? - PullRequest
Новая
       24

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

17 голосов
/ 03 июня 2010

Я использую 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>

Код выше выглядит следующим образом:

Спусковые устройства отрезаны http://thinkdrastic.net/journal/wp-content/uploads/2010/06/descenders.png

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

Ответы [ 8 ]

12 голосов
/ 03 июня 2010

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

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

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

Спусковые устройства работают! http://thinkdrastic.net/journal/wp-content/uploads/2010/06/fixed-descenders.png

4 голосов
/ 10 мая 2012

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

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

Значения, которые могут нуждаться в корректировке: WinAscent & WinDescent.

Быстрое и грязное исправление - настроить оба на 0.

Это можно сделать с помощью Font Forge . Как только шрифт открыт в FontForge, вы можете получить доступ к этим параметрам через диалог « Информация о шрифте ».

3 голосов
/ 12 апреля 2013

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

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

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

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

3 голосов
/ 03 июня 2010

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

1 голос
/ 16 декабря 2011

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

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

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

0 голосов
/ 20 февраля 2016

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

0 голосов
/ 24 декабря 2014

У меня была похожая дилемма, и исправление высоты строки работало для меня (то есть я добавил этот код в раздел «Пользовательский CSS»): 

h2 { line-height: 140%; }
0 голосов
/ 31 мая 2012

Если подсказка вверху - изменение размера шрифта на .... 

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

не работает для вас, затем добавьте «высоту строки» к элементу, который отрезает спусковые механизмы. ``

...