Работа с шрифтами (font, font-family, font-face)

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

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

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

Шрифт можно указать с помощью CSS свойства "font-family". Если перевести дословно название этого свойства, то получится "семейство шрифтов". В значении этого свойства необходимо указать название шрифта. К примеру:
<span style="font-family: Arial;">Тише, мыши, кот на крыше.</span>
На странице с таким кодом будет показан текст, написанный шрифтом Arial
Тише, мыши, кот на крыше.
Но текст будет написан этим шрифтом только в том случае, если этот шрифт есть у пользователя, который просматривает сайт. Если этого шрифта нет в его системе, то будет выбран стандартный. Поэтому если вы не хотите подключать файлы шрифтов в CSS, то стоит указать в качестве шрифта один из так называемых "веб безопасных шрифтов". Эти безопасные шрифты точно будут отображаться на любой системе. Вот список их названий и примеры:
Arial: Тише, мыши, кот на крыше.
Arial: Тише, мыши, кот на крыше.
Verdana: Тише, мыши, кот на крыше.
Georgia: Тише, мыши, кот на крыше.
Impact: Тише, мыши, кот на крыше.
Arial Black: Тише, мыши, кот на крыше.
Comic Sans MS: Тише, мыши, кот на крыше.
Trebuchet MS: Тише, мыши, кот на крыше.
Courier New: Тише, мыши, кот на крыше.
Times New Roman: Тише, мыши, кот на крыше.
В разных операционных системах шрифты могут выглядеть по-разному из-за авторских прав. К примеру, шрифта "Times New Roman" нет на операционной системе Linux (а на этой системе работает большинство мобильных устройств). В таких случаях система будет подставлять шрифт, который похож на требуемый, но не идентичен ему.
Можно указать несколько шрифтов через запятую. Тогда если в системе нет шрифта, то будет взят следующий из списка.
<span style="font-family: Arial, Verdana;">Тише, мыши, кот на крыше.</span>
Можно не указывать название шрифта напрямую, а сказать какого именно типа нужен шрифт. Система сама подберёт шрифт под нужный тип:
  • serif - шрифт с засечками на концах букв. К примеру, Times New Roman
  • sans-serif - шрифт без засечек. К примеру, Arial
  • cursive - курсивный шрифт
  • fantasy - декоративный шрифт
  • monospace - моноширинный шрифт (все буквы одинаковой ширины)
Эти типы указываются в значении свойства font-family так же, как и названия шрифтов. Обычно сначала указывают названия шрифтов, а в конце списка один или несколько из этих типов. Это делается на тот случай, если вообще ни один из перечисленных шрифт не был найден в системе:
<span style="font-family: Arial, serif;">Тише, мыши, кот на крыше.</span>

Шрифты в подключаемых файлах (font-face)

Чтобы специфический шрифт сайта попал к пользователю, файл со шрифтом необходимо передать. Делается эта загрузка благодаря CSS правилу @font-face. Чтобы загрузить файл шрифта, необходимо сначала положить его к себе на сайт или узнать ссылку на него на других сайтах. После того как будет получена ссылка на файл шрифта, на HTML странице можно подключить его и задать этот шрифт тексту через свойство font-family. Приведём пример HTML кода вместе со стилями:
<style>
@font-face { 
   font-family: 'Montserrat'; 
   src: url('/montserrat.ttf'); 
}
</style>
<span style="font-family: Montserrat;">Тише, мыши, кот на крыше.</span>
В правиле @font-face:
  • font-family - указывается название шрифта. Это название необходимо использовать далее в CSS правилах.
  • url(' ... ') - указывается абсолютная или относительная ссылка на файл шрифта. У файлов шрифтов есть разные расширения: ttf, eot, woff, woff2. Некоторые браузеры умеют понимать одни файлы, другие нет. Поэтому часто указывается несколько файлов шрифтов с разными расширениями.
Шрифты замедляют загрузку страницы. Ведь CSS правила читаются последовательно. И пока не закончится загрузка файлов шрифтов, указанных в @font-face, то страница не начнёт отображаться. Поэтому если хотите ускорить загрузку своего сайта, то подключайте их в самом конце страницы. Либо используйте веб безопасные шрифты. С другой стороны, достаточно загрузить шрифт один раз - потом он попадает в кеш.
MouseDC.ru - хостинг, виртуальный хостинг, покупка доменов, проверка доменов, WHOIS, курсы создания сайтов, вебинары по созданию, курсы разработки сайтов, доработка сайтов, сопровождение сайтов, разработка сайтов, техподдержка сайтов
Была ли эта статья полезна? Есть вопрос?
Cмотрите другие статьи: