Оставить заявку

E-mail отправителя *:
Имя:
Телефон:
Время звонка:
Согласен(на) с политикой конфиденциальности сайта

Безопасные шрифты для сайта. Как установить шрифт?

Создание сайтов

Безопасные шрифты для сайта. Как установить шрифт?

Сегодня поговорим о том, что такое безопасные шрифты для сайта. У каждого владельца своего сайта рано или поздно появляется необходимость внедрить уникальный шрифт в свой проект. Существует два способа использования шрифтов. Стандартный способ из существующих шрифтов и с помощью подключения так называемого метода 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 2915 4.0

0 Комментариев

Добавить комментарий