Шрифты в HTML (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: Тише, мыши, кот на крыше.

Можно указать несколько шрифтов через запятую. Тогда если в системе нет шрифта, то будет взят следующий из списка.

<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. Некоторые браузеры умеют понимать одни файлы, другие нет. Поэтому часто указывается несколько файлов шрифтов с разными расширениями.