Почему мои ограничители отключены при использовании 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="#" onclick="location.href='http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold'; return false;" 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. Кто-нибудь знает, как это исправить?

Ответ 1

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

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

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

_{(источник: thinkdrastic.net)}

Ответ 2

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

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

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

Быстрое и грязное исправление будет заключаться в том, чтобы настроить их как на 0.

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

Ответ 3

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

Ответ 4

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

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

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

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

Ответ 5

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

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

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

Ответ 6

Если вершина в верхней части - изменение размера шрифта на....

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

не работает для вас, а затем добавляет "line-height" к элементу, который отключает descenders. ``

Ответ 7

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

Ответ 8

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

h2 { line-height: 140%; }