Сегодня поговорим о том, что такое безопасные шрифты для сайта. У каждого владельца своего сайта рано или поздно появляется необходимость внедрить уникальный шрифт в свой проект. Существует два способа использования шрифтов. Стандартный способ из существующих шрифтов и с помощью подключения так называемого метода font face. Расскажу о том и другом более подробно в данной статье.
Стандартные шрифты
К стандартным шрифтам можно отнести Times New Roman, Arial и другие. Они будут отлично просматриваться на большинстве устройств с различными операционными системами. Так, например, к ним можно применить следующие значения:
В спецификации представлены следующие родовые семейства (значения):
-
serif - шрифты с засечками на концах;
-
sans-serif - шрифты без засечек;
-
cursive - шрифты курсивного начертания;
-
monospace - моноширинный шрифт;
-
fantasy - декоративные шрифты.
Вывести шрифт не составит труда. Просто пропишите в CSS вашего сайта следующий код:
body {font-family: Arial, sans-serif;}
Изучив операционные системы и работу шрифтов в них, подготовлен список безопасных шрифтов для сайта:
-
Arial
-
Arial Black
-
Comic Sans MS
-
Courier New
-
Georgia
-
Impact
-
Times New Roman
-
Trebuchet MS
-
Verdana
Подключение шрифтов Font Face
Рано или поздно любой дизайнер, любой владелец сайта устает от одних и тех же шрифтов. На помощь ему приходят нестандартные шрифты, которые можно подключить с помощью Font Face. Это способ прикреплять шрифты TrueType и OpenType. Подключив уникальный шрифт ваш сайт преобразиться и станет более привлекательным для его посетителей. На примере нашего сайта мы рассмотрим, как подключить шрифт Font Face.
В самом начале вам необходимо подобрать шрифт. Лучше использовать тот шрифт, который поддерживает кириллицу и латиницу! После этого шрифт для правильной работоспособности в разных браузерах нужно перевести в разные форматы в этом Вам помогут сервисы:
-
http://www.font2web.com/
-
https://everythingfonts.com/font-face
После того как мы сгенерировали шрифты нам необходимо в CSS нашего сайта добавить код (Название шрифта Open Sans меняете на свой который подключаете, а также изменяете путь к файлам шрифта на свой):
@font-face
{
font-family: 'Open Sans';
src: url('/fonts/opensans-regular.eot');
src: url('/fonts/opensans-regular.eot?#iefix') format('embedded-opentype'),
url('/fonts/opensans-regular.svg#OpenSansRegular') format('svg'),
url('/fonts/opensans-regular.ttf') format('truetype'),
url('/fonts/opensans-regular.woff') format('woff'),
url('/fonts/opensans-regular.woff2') format('woff2');
}
После того как мы его подключили присваиваем нужному классу необходимое значение font-family:
.logo {
font-family: Open Sans;
font-size:70px;
margin:0px 25px 0px 25px;
}
Уточнение для браузеров
Существует ряд особенностей при подключении шрифтов Font Face для разных браузеров. Так, например, браузер Internet Explorer до версии 9.0 поддерживает только шрифты формата EOT (Embedded OpenType). А браузер Opera в некоторых моментах может не показывать на сайте текст тем шрифтом, который вы выбрали, при этом заменяя его на стандартный. Вот такие небольшие практически советы и рекомендации как установить безопасные шрифты для сайта. Желаю Вам и вашему сайту успехов и до новых встреч!
0 Комментариев