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

Ответ 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

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