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

Question

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

Это легко воспроизвести на собственной странице WebFonts Google ищет Droid Sans и показывая весь алфавит в 18px: http://www.google.com/webfonts

Это особенно ясно для нижней части корпуса g.

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

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

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

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

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

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

Answer 1

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

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

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

Answer 2

К similar question, один ответ предполагает, что, хотя это, по-видимому, проблема с выпуском шрифтов Windows, размещение версий svg, eot и otf шрифта TrueType (TTF) содержится в g шрифт, который был не оптимизирован для Интернета, устранил проблему для своего провайдера. Если возможно, получите чистую, не оптимизированную версию шрифта 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 экспортировать веб-шрифты (СРВ, Woff, SVG). Попробуйте переставить исходники в CSS, как описано выше вначале.

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

Answer 3

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

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

@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 спецификации (почему это так или иначе?), Заставляет WebKit браузеры использовать 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, это своего рода размытие, поэтому я не буду использовать это решение, и я надеюсь на лучшее.

Answer 4

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

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

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

---

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

Answer 5

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

• Сформирован шрифт.TTF в WebFont файлы с Font2Web
• Подаются файлы шрифтов локально как статические активы файлов с локального
• Включенные шрифты в моем CSS с bulletproof @font-face implementation

Это устранило мой срезанные оказал текст эмиссии.