Работа с шрифтами (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, покупка SSL сертификатов, доработка сайтов, сопровождение сайтов, разработка сайтов, техподдержка сайтов
Была ли эта статья полезна? Есть вопрос?
Cмотрите другие статьи: