8 (499) 3-777-413

Безопасные шрифты

В разных операционных системах набор системных шрифтов отличается, и довольно существенно. В Windows есть шрифт Arial, в Linux этого шрифта нет, а на Mac аналогом шрифта Arial является шрифт Helvetica. На планшетах и мобильных телефонах также свои наборы системных шрифтов.

Веб браузер при открытии html документа считывает стили элементов, и ищет в системе шрифт, соответствующий стилю элемента. Если шрифт в системе найден, всё хорошо, но если шрифта нет, страница может отображаться совсем не так, как хотел разработчик. 

Как браузер обрабатывает шрифты

font-family: Verdana, "Geneva CY", "DejaVu Sans", sans-serif;

Браузер воспринимает css шрифты следующим образом: «первый в списке, если такого в системе нет — второй в списке, если такого нет — третий в списке...». Код выше веб браузер обработает так: сперва попробует подключить к странице шрифт Verdana, в случае если шрифта нет - попробует Geneva CY, если и этого шрифта нет - DejaVu Sans. Если ни одного из указанных шрифтов нет в системе, браузер подключит шрифт, который у него задан как sans-serif (шрифт без засечек).

Отсутствие фоллбэка может стать причиной развалившейся верстки. В качестве решения проблемы как правило применяются «вебсейф» наборы шрифтов.

Безопасные наборы шрифтов

font-family:"Arial Black", "Helvetica CY", "Nimbus Sans L" sans-serif;
font-family: Arial, "Helvetica CY","Nimbus Sans L", sans-serif;
font-family: "Comic Sans MS", "Monaco CY", cursive; /*:3*/
font-family:"Courier New", "Nimbus Mono L",monospace;
font-family: Georgia, "Century Schoolbook L",Serif;
font-family: Impact, "Charcoal CY",sans-serif;
font-family: "Lucida Console", Monaco, monospace;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-family: "Palatino Linotype","Book Antiqua", Palatino, serif;
font-family: Tahoma,"Geneva CY", sans-serif;
font-family: "Times New Roman", "Times CY", "Nimbus Roman No9 L",serif;
font-family: "Trebuchet MS", "Helvetica CY",sans-serif;
font-family: Verdana, "Geneva CY", "DejaVu Sans", sans-serif;