Что такое кросс-браузерные, кросс-платформенные веб-безопасные шрифты?

Question

Как сделать кросс-браузерный, кросс-платформенный и совместимый со всеми устройствами стек шрифтов css?

Answer 1

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

Безопасной ставкой является использование общего семейства шрифтов, которое может быть интерпретировано мобильным браузером для отображения соответствующего шрифта, например,

font-family: serif; /* (e.g., Times) */
font-family: sans-serif; /* (e.g., Helvetica) */
font-family: monospace; /* (e.g., Courier) */

Answer 2

Лучшее решение - всегда предоставлять общее семейство шрифтов после любых определенных шрифтов:

font-family: "Foo Regular", "Bar Sans", sans-serif;

Answer 3

Может быть, эта ссылка может дать вам еще несколько идей:

http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

Использование указанных семейств шрифтов никогда не доставляло мне проблем.

Answer 4

Возможно, это поможет вам в поиске: Матрица шрифтов в комплекте с операционными системами Mac и Windows, Microsoft Office и Adobe Creative Suite

Answer 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: Веб-безопасные шрифты

Answer 6

Некоторые ссылки "Безопасные веб-шрифты" из Google top:

https://www.cssfontstack.com/

http://web.mit.edu/jmorzins/www/fonts.html

Answer 7

Забудьте о кросс-браузерных кросс-платформенных стеках шрифтов, веб-примеры обычно заботятся только о Windows и OSX для основного латинского языка, они не работают на международных языках и в Linux, а также о новых форм-факторах.

Linux никогда не использовал те же шрифты, что и Windows и OSX по причинам лицензирования, и инструменты для разработки шрифтов стали достаточно зрелыми, в настоящее время вы обнаружите большое разнообразие (не то, что создание большого шрифта кодирования легко, но многие пользователи заботятся только о них). о шрифтах, которые охватывают их конкретный язык).

Создание шрифтов стало достаточно дешевым, и крупные корпорации (включая производителей мобильных устройств) теперь любят дифференцироваться, заказывая новые шрифты для больших выпусков (нового устройства или основной версии ОС).

Когда опросы о шрифтах все еще были популярны, семейство шрифтов DejaVu широко использовалось в Linux, что может быть уже не так. У DejaVu и Arial разные показатели.

Просто используйте общие семейства шрифтов CSS в вашем стеке, избегайте любых производных от helvetica, не используйте дизайн, который зависит от конкретных метрик шрифтов, и все будет в порядке.