Нижняя часть пользовательского шрифта отключена в Opera и webkit

Я использую собственный шрифт на странице, которую я разрабатываю, Droid Sans, и при определенных размерах шрифта снизу обрезают, но только в браузерах Opera и webkit.

Легко воспроизводить на странице собственных веб-сайтов Google, где можно найти Droid Sans и показывать весь алфавит в 18px: http://www.google.com/webfonts

Это особенно ясно для нижнего регистра g.

Есть ли какой-либо css-трюк/хак, который я могу использовать для увеличения высоты строки/отображения всего персонажа или я действительно ограничен только определенными размерами шрифта?

line-height и padding, например, ничего не меняют, а 20px font-size отлично работает и на данный момент я использую Windows 7.

Изменить: Кстати, я знаю аналогичный вопрос здесь, но поскольку принятый ответ меняет размер шрифта и остальные ответы не применяются, это не очень полезно для меня.

Изменить 2: Пример, который по крайней мере пока показывает проблему (левый столбец, под слайд-шоу, Il Cerca Viaggi).

Изменить 3: Проблема, похоже, ограничена Windows, хотя я не уверен, какие версии.

Изменить 4:. Я добавил скриншот из Google Webfonts, чтобы показать, что проблема не специфична для сайта, который я разрабатываю.

Ответ 1

Хотя это не то решение, которое я ищу, я нашел возможное решение, которое может работать для других:

В моем оригинальном стиле я указал шрифт следующим образом:

@font-face {
    font-family: 'DroidSans';
    src: url('droid-sans/DroidSans-webfont.eot');
    src: local('☺'),
         url('droid-sans/DroidSans-webfont.eot?#iefix') format('embedded-opentype'),
         url('droid-sans/DroidSans-webfont.woff') format('woff'),
         url('droid-sans/DroidSans-webfont.ttf') format('truetype'),
         url('droid-sans/DroidSans-webfont.svg#DroidSans') format('svg');
    font-weight: normal;
    font-style: normal;
}

Это приводит к тому, что браузеры webkit используют файл/формат woff.

Изменение порядка спецификаций шрифтов и удаление хэш-тега после спецификации svg (почему это так?), заставляет браузеры веб-кита использовать файл/формат svg:

@font-face {
    font-family: 'DroidSans';
    src: url('droid-sans/DroidSans-webfont.eot');
    src: local('☺'),
         url('droid-sans/DroidSans-webfont.eot?#iefix') format('embedded-opentype'),
         url('droid-sans/DroidSans-webfont.svg') format('svg'),
         url('droid-sans/DroidSans-webfont.woff') format('woff'),
         url('droid-sans/DroidSans-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

Это решает проблему, все символы отображаются правильно.

Однако, по крайней мере, в Windows 7 64bit шрифт svg не такой резкий, как шрифт woff, он как бы размытый, поэтому я не буду использовать это решение и надеюсь на лучшее.

Ответ 2

В аналогичном вопросе один из ответов предполагает, что, хотя это, по-видимому, проблема с выпуском шрифтов Windows, в частности, версии svg, eot и otf шрифта TrueType (TTF), содержащий шрифт, который был не оптимизирован для веб-сайта, устранил проблему для своего провайдера. Если возможно, получите чистую, не оптимизированную версию шрифта DroidSans и самостоятельно экспортируйте веб-шрифты.

EDIT: Извините, я отсутствовал на праздник и не имел доступа к SO. Поскольку я вернулся, я провел небольшое исследование того, что вызывает эту проблему на машинах Windows...

Похоже, проблема связана с тем, как формат OpenType отображается на машинах Windows. Проблема с усеченными descenders, кажется, превосходит тип программного обеспечения, чтобы повлиять на несколько программ Windows, пытающихся отобразить OpenType. В настоящее время у вас есть версия встроенного формата OpenType (EOT) шрифта, указанного первым в вашем документе CSS в разделе @font-face. Поскольку Chrome и Opera распознают этот формат, они будут игнорировать последующие объявления источника и использовать EOT для отображения шрифта. К сожалению, не существует быстрого исправления, которое вы могли бы применить к самому шрифту OpenType, чтобы заставить программное обеспечение обеспечить его достаточное расстояние между строками для самого низкого из его descenders на машинах Windows...

Однако, вы можете выбирать, какие шрифты вы кормите в браузерах ваших зрителей. Лично я бы рекомендовал разместить версию SVG в начале в вашем CSS, а для браузеров, которые не распознают этот формат, предложите второй вариант TrueType (TTF), затем WOFF, затем EOT для браузеров, которые не поддерживайте любой из вышеперечисленных (некоторые более старые версии IE, по-видимому, поддерживают OpenType exculsively). Если рендеринг SVG вам не по душе, сначала попробуйте TrueType.

В качестве альтернативы, хотя я уже не уверен, что это поможет, вы можете загрузить TTF DroidSans по адресу FontSquirrel и используйте программный пакет, например Typograf для экспорта веб-шрифтов (EOT, WOFF, SVG). Попробуйте переставить исходники в CSS, как описано выше, однако.

ДРУГОЕ ИЗМЕНЕНИЕ: Мое ошибочное использование TIFF вместо TTF было отредактировано, чтобы избежать путаницы в будущем. Извинения за путаницу, ребята...

Ответ 3

Я не уверен, но попробуйте добавить это для заполнения для работы

display:block;
padding-bottom:20px;
margin-bottom:10px;
line-height:normal !important;
line-height:55%;

Установите высоту линии в нормальное состояние, это ошибка firefox и используйте высоту строки в% Я думаю, что это может сделать трюк

Ответ 4

Все это сводится к самому шрифту.

Посмотрите здесь
http://jsfiddle.net/DdMej/2/

В первой строке используются шрифты Drod Sans от Google. Вторая строка использует шрифт, который у вас есть на вашем сайте.

изменить 1
Скриншот
http://imageshack.us/photo/my-images/811/screeniy.png/

Ответ 5

Я тоже видел, что мой Google Font "Lato" отключен в нижней части отображаемого текста. В моем случае мне нужно было использовать файлы шрифтов локально вместо использования Google Fonts. Для этого я:

Преобразовал шрифт из .ttf в файлы webfont с Font2Web
Служит файлами шрифтов локально как статические файловые ресурсы из localhost
Включены шрифты в моем css с пуленепробиваемая реализация @font-face

Это устранило мою проблему с отрисованным текстом.