Google webfont Lato 100 и мобильный Safari

Question

Я использую веб-шрифт Google api со шрифтом "Lato", шрифт с весом 100.

В настольных браузерах, которые я тестировал, все отображается нормально. Однако, если я просматриваю веб-страницу с iPad или iPhone (оба iOS5), я замечаю, что шрифт очень тонкий, и единственное, что, кажется, отображается правильно, это точки.

Я попытался реализовать шрифт с использованием методов Javascript, LINK-Tag и CSS @import, все они дали одинаковые результаты.

Я видел, что в часто задаваемых вопросах говорится: API веб-шрифтов Google надежно работает в подавляющем большинстве современных мобильных операционных систем, включая Android 2.2+ и iOS 4.2+ (iPhone, iPad, iPod). Поддержка более ранних версий iOS ограничена.

Что означает, что это должно работать, верно? Есть ли способ решить это?

Спасибо

Answer 1

Что-то, что я видел, чтобы помочь действительно тонким шрифтам (кстати, также Лато), это:

-webkit-text-stroke-width: 0.1px;

В любом случае, это только в каждом конкретном случае, я бы использовал запрос класса / медиа, чтобы убедиться, что он применяется только тогда, когда это необходимо (сафари (с классом, установленным js) в масштабе менее 1,0 или около того). Попробуйте более высокие значения с плавающей запятой, если это необходимо.

Answer 2

Мне кажется, что это неудачная комбинация ультратонкой гарнитуры и способа, которым Mobile Safari масштабирует сайт, чтобы он поместился на экране.Обычно шрифты имеют подсказки, которые позволяют вашему компьютеру интерпретировать, как рисовать пиксели, если он достигает субпиксельных уровней, но это переопределяется масштабированием Mobile Safari, и, таким образом, рисует половину пикселей как полупрозрачную.Уменьшите масштаб вашего сайта, добавив следующий метатег:

<meta name="viewport" content="initial-scale=1.0; minimum-scale=1.0">

Если вы хотите, чтобы шрифт казался меньше в мобильном сафари, решением было бы сохранить предыдущее объявление и объявить размер шрифта медиа-запросом:1006 *

@media only screen and (max-device-width: 480px) {
  font-size: 15px;
}

Если ничего не помогает, я бы добавил текстовую тень размером 0px:

.selector {
   text-shadow: 0 0 0 white;
}

Answer 3

Может быть, это ошибка -webkit-text-size-adjust. Попробуйте

-webkit-text-size-adjust : none

Answer 4

Вы используете Ultra-Light 100?Если вы установите его на 100, но файл имеет другой вес, Mobile Safari может попытаться смоделировать более тонкий вариант.

В любом случае попробуйте -webkit-font-smoothing: antialiased;, если это не сработает, вам не повезлопопробуй 300.

Answer 5

Вы можете попробовать добавить это в свой CSS для рассматриваемого элемента:

-webkit-font-smoothing: subpixel-antialiased;

Точно так же у вас могут быть преобразования, влияющие на сглаживание. Вы также можете попробовать:

-webkit-transform: translate3d(0,0,0);

И даже ...

-webkit-backface-visibility: hidden;

Сумасшедший, я знаю.