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