IOS 4.2+ webfont (ttf) полужирный шрифт для увеличения шрифта

Это достаточно: укажите ttf шрифт рендеринга font-weight:bold неправильно на мобильном Safari для iOS, откройте демонстрационный сайт с iphone/ipad с iOS 4.2/4.3 Beta 3 или выше:

(это Reenie + Beanie из шрифтов Google)

http://jsbin.com/ojeqe3/16/

Захват экрана

Вы видите полужирный шрифт, выглядящий как double rendered. Это маловероятно для малого и среднего размера шрифта, но довольно значительного для большого размера шрифта/увеличения в

Мой друг сообщит об этой ошибке яблоку. Однако, что он может сделать, чтобы решить эту ошибку? (kill text-adjust не ОК)

Обновление: Этот не фиксирован в iOS5.

Лучшее решение, которое я знаю для проблемы, будет

  • Используйте font-weight:normal (как показано на демо)
  • Используйте -webkit-text-strok e или text-shadow, чтобы он выглядел "жирным" (плюс iPad только css - префикс тела, добавленный js, а не только медиа-запрос).

Ответы

Ответ 1

Имела ту же проблему с h1, наследующим font-weight: bold; от родительского класса. Просто перепишите унаследованный стиль с помощью font-weight: normal;

Ответ 2

Кажется, что у Mobile Safari есть баггский способ рендеринга стилей faux со шрифтами-гранями. Для смелых он удваивает текст и смещение, а с большинством шрифтов он останется незамеченным, но с тонкими шрифтами он будет выглядеть как двойное видение.

В вашем случае Reenie Beanie не включает жирный стиль, и если вы используете их как заголовок без изменения font-weight до normal или 400, он отобразит смелый вес "faux styled".

Обратите внимание, что использование стилей faux обычно не работает в некоторых браузерах, а не только в Mobile Safari.

Решение 1. Используйте соответствующий font-weight

Таким образом, лучшим решением является изменение веса шрифта на тот, который предоставляет Google Fonts, быстрое исправление ниже:

h1, h2, h3, h4, h5, strong, b { 
    font-weight: 400; 
} 
/* or font-weight: normal */

Решение 2. Используйте шрифт, который обеспечивает жирный/курсивный стиль, который вы хотите

Другим решением является выбор шрифта из архива веб-шрифтов, в котором делает смелый стиль. Альтернативы в Google Fonts, которые очень похожи на Рини Бини и являются "более смелыми", будут, например, Gochi Hand, Sunshiney или Постоянный маркер.

Решение 3. Поддельный подделка с использованием других средств

Если вы действительно настаиваете на необходимости искусственного смелого стиля, вы можете попробовать использовать тонкий текст text-shadow или text stroke.

Ответ 3

не используйте тег "смелый" или "полужирный". они не нужны, если вы используете определенный взвешенный веб-сайт.

У меня была та же проблема. Он ушел, когда я удалил упоминание о шрифте.

Ответ 4

Попробуйте применить это правило css:

-webkit-font-smoothing: antialiased;