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

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

12 голосов
/ 20 декабря 2011

Я использую пользовательский шрифт на странице, которую я разрабатываю, 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, чтобы показать, что проблема не относится к разрабатываемому мной сайту.

Chrome 16, Google Webfonts

Ответы [ 5 ]

11 голосов
/ 23 декабря 2011

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

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

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

7 голосов
/ 23 декабря 2011

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

РЕДАКТИРОВАТЬ: Извините все, я был на празднике и не имел доступа к SO. С тех пор как я вернулся, я провел небольшое исследование, чтобы выяснить, что именно вызывает эту проблему на компьютерах с Windows ...

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

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

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

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

2 голосов
/ 22 декабря 2011

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

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

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

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

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

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

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

edit 1
Снимок экрана
http://imageshack.us/photo/my-images/811/screeniy.png/
enter image description here

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

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

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

...