Шрифт «Lato» странно отображается в сафари, а не в хроме или Firefox

Я использую шрифт «Lato» из веб-шрифтов Google, и он отлично отображается во всех браузерах, кроме сафари.

Я использую его в font-weight:100;

вот несколько скриншотов из разных браузеров. Есть идеи, что может быть причиной того, что он становится чрезвычайно тонким? Или, если есть способ настроить его на рендеринг в font-weight:300; только для сафари?

Я также решил проблему с js - http://jsfiddle.net/qLHuc/1/

FIREFOX

введите здесь описание изображения

ХРОМ

введите здесь описание изображения

САФАРИ

введите здесь описание изображения


fonts css cross-browser text-rendering
person sam    schedule 14.03.2013    source источник
comment
100 очень легкий. Вы уверены, что Safari не единственный, кто правильно его отображает? Выглядит ли это по-другому на 300 в Chrome и Firefox?   -  person Chris Herbert    schedule 14.03.2013
comment
Да, обычно я бы использовал 100 текстов, но это подзаголовок размером 24 пикселя, поэтому он не исчезает на заднем плане. изображения выше имеют масштаб 1:1. Я попробовал это в 300, и в сафари 300 выглядит как 100 всех других браузеров. В хроме и фаерфоксе 300 выглядит толще   -  person sam    schedule 14.03.2013
comment
Сделайте для нас jsfiddle.   -  person Chris Herbert    schedule 14.03.2013
comment
Кроме того, применяется ли к элементу -webkit-font-smoothing: сглаживание?   -  person Chris Herbert    schedule 14.03.2013
comment
@ChrisHerbert - я пробовал это, но, похоже, это не помогает, я также сделал jsfiddle, см. Исправленный вопрос выше, с уважением   -  person sam    schedule 14.03.2013
comment
Он слегка визуализируется в хроме на Linux v.23.   -  person Ryan    schedule 14.03.2013
comment
@ryan — я только что обновил скрипку для использования — субпиксельное сглаживание, как здесь — jsfiddle.net/qLHuc /2   -  person sam    schedule 14.03.2013
comment
Еще очень светлый, я его почти не вижу. на 300 это выглядит так, как на скриншотах выше.   -  person Ryan    schedule 14.03.2013

Ответы (3)


arrow_upward
16
arrow_downward

Я не уверен, почему, но Safari отключает сглаживание субпикселей при малых размерах шрифта на этой странице. Вы можете исправить это, применив -webkit-font-smoothing: subpixel-antialiased. См. здесь: http://jsfiddle.net/qLHuc/3/

Тем не менее, я думаю, вам следует подумать об использовании более тяжелого шрифта. Вы тестировали это на Windows? Вероятно, он будет выглядеть очень, очень легким. OSX очень сильно отображает текст, когда включено субпиксельное сглаживание, и особенно сильно, когда текст находится на темном или цветном фоне. То, что вы видите на снимке экрана Safari, похоже на то, что увидят люди, не использующие OSX.

person Chris Herbert    schedule 14.03.2013

arrow_upward
2
arrow_downward

Я также столкнулся с аналогичной проблемой, когда пытался использовать шрифты Google с размером шрифта: 300 - он отлично работает во всех браузерах, кроме сафари.

Я решил это, добавив ниже свойство css.

-webkit-font-smoothing: сглаживание;

person Srinivas    schedule 17.10.2014

arrow_upward
0
arrow_downward

Я столкнулся с похожей проблемой, которая выглядела точно так же. Я использовал CSS font-weight: lighter; при использовании этой ссылки на шрифт Google:

http://fonts.googleapis.com/css?family=Lato:300,400

Каким-то образом он отображался как 100 вес! Итак, теперь я явно использую font-weight:300;, чтобы получить то, что хочу. Я не уверен, но я полагаю, что это, вероятно, имеет какое-то отношение к тому, что у меня есть шрифт в моей системе, и Google предлагает моему компьютеру использовать системный шрифт перед его повторной загрузкой... Без этого вопроса я бы не разобрался. и А, спасибо!

person counterbeing    schedule 12.11.2013