Как сделать кросс-браузер, кросс-платформу и все устройства совместимыми css-шрифтом?
Что такое кросс-браузерные, перекрестные platfom веб-безопасные шрифты?
Ответ 1
Вы не можете настроить шрифты, которые будут использоваться на мобильном устройстве, так же, как вы можете гарантировать, какие шрифты доступны на обычном компьютере.
Безопасная ставка заключается в использовании родового семейства шрифтов, который может быть интерпретирован мобильным браузером, чтобы показать вам соответствующий шрифт, например.
font-family: serif; /* (e.g., Times) */
font-family: sans-serif; /* (e.g., Helvetica) */
font-family: monospace; /* (e.g., Courier) */
Ответ 2
Лучшее решение - всегда предоставлять общее семейство шрифтов после любых конкретных шрифтов:
font-family: "Foo Regular", "Bar Sans", sans-serif;
Ответ 3
Возможно, эта ссылка может дать вам еще несколько идей:
http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html
Использование вышеприведенных семейств шрифтов никогда не вызывало у меня проблем.
Ответ 4
Возможно, это поможет вам в вашем квесте: Матрица шрифтов в комплекте с операционными системами Mac и Windows, Microsoft Office и Adobe Creative Suite
Ответ 5
Он указывает в 15.3 Рекомендации W3C относительно свойства font-family, что у вас должны быть резервные шрифты в стеке шрифтов, чтобы ваш посетитель веб-сайта имел некоторые жизнеспособные варианты.
Используемые стеки шрифтов "web safe", которые охватывают большинство, если не все устройства, следующие:
/* Web Safe Font Stacks (classes set in CSS) */
.head {font-family: Georgia,'Times New Roman',serif}
.para {font-family: Verdana,Arial,sans-serif}
.mono {font-family:'Courier New',Courier,monospace}
.fant {font-family: Papyrus,Impact,fantasy}
.curs {font-family:'Apple Chancery','Lucida Calligraphy',cursive}
Это охватывает заголовки, параграфы, моноширину для образцов кода, фантазию для специальных предметов и курсив для акцента. Вам может понадобиться только один для заголовков (H1 ~ H6), а другой для основного текста:
body {font-family: Verdana,Arial,sans-serif}
h1, h2, h3, h4, h5, h6 {font-family: Georgia,'Times New Roman',serif}
Проверьте следующий чит-лист с 2010 года, который включает Linux и iOS. Он дает средний процент для использования между Windows, Mac, Linux и iOS: веб-безопасные шрифты
Ответ 6
Забудьте о кроссплатформенных стеках кросс-браузера, веб-примеры обычно заботятся только о окнах и OSX для базового латинского языка, они терпят неудачу на международных языках и Linux, а также в новых форм-факторах.
Linux никогда не использовала те же шрифты, что и Windows и OSX по причинам лицензирования, а инструменты для создания шрифтов стали достаточно зрелыми, и вы обнаруживаете много разнообразия в наши дни (не то, что создание большого шрифта кодирования легко, но многие пользователи только заботятся о шрифтах, которые охватывают их особый язык).
Создание шрифтов стало достаточно дешевым для крупных корпораций (в том числе мобильных производителей), которые теперь любят дифференцировать, вводя новые шрифты для больших выпусков (новое устройство или основная версия ОС).
Когда исследования шрифтов по-прежнему пользовались популярностью, семейство шрифтов DejaVu имело большую досягаемость в Linux, это может быть и не так. DejaVu и Arial имеют разные показатели.
Просто используйте общие семейства шрифтов CSS в своем стеке, избегайте любого производного helvetica, не используйте дизайн, зависящий от определенных метрик шрифта, и вы будете в порядке.
Ответ 7
Некоторые "Веб-безопасные шрифты" связаны с Google сверху:
Ответ 8
на мобильном веб-сайте лучше всего не устанавливать шрифт-семью вообще