Почему iOS Safari добавляет дополнительный интервал между буквами?

Я думаю, что нашел ошибку веб-рендеринга для Google Fonts in Mobile (iOS 8) Safari. Мне кажется, что Mobile Safari добавляет крошечный бит межстрочного интервала ко всему тексту, который использует Google Fonts, или что он использует другой шрифт. Неважно, какой Google Font я пытаюсь (Open Sans). Он корректно отображает все современные браузеры. Протестировано Android, FF, Chrome, Safari.

Попробуйте загрузить эту страницу на устройстве iOS, чтобы понять, что я имею в виду. Смотрите также код и скриншот. Смотрите эту ссылку для просмотра в прямом эфире: https://dl.dropboxusercontent.com/u/430406/Temp%20%5Bok%20to%20delete%5D/Checking%20Font/index.html

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
</head>

<body>
  <h2 style="font-family: 'Roboto'">Roboto: Looks like it gets a bit extra line-spacing in iOS Safari, though this is not possible to find in web inspector</h2>
  <h2 style="font-family: 'Arial'">Arial: Works fine in iOS Safari</h2>
</body>

</html>

Ответ 1

Я нашел решение в этом вопросе: iOS 4.2+ webfont (ttf) полужирный шрифт для увеличения размера шрифта

Мобильный Safari является ошибкой при рендеринге фальшивых шрифтов шрифтов, если вы не устанавливаете вес шрифта (например, font-weight: 400 или font-weight: normal). Вам нужно конкретно установить вес шрифта css для его правильного отображения на мобильных устройствах сафари.

Это решение.

h2 {
  font-weight: 400;
}

Ответ 2

Обратите внимание, что Google Web Fonts экспортирует только обычный вес (400) по умолчанию, что может привести к тому, что Mobile Safari (и другие браузеры) будет принудительно навязывать искусную жирность.

Чтобы явно экспортировать более смелые веса, выберите "НАСТРОЙКА" в панели выбора шрифтов Google Web Font, вручную проверьте каждый дополнительный вес, который вам нужен, и используйте обновленный код для встраивания.

)] 1