При создания сайтов достаточно часто встаёт задача добавления нового шрифта. Если это определенный заголовок, шрифт которого используется только один раз, то целесообразнее всего будет сохранить этот заголовок в виде картинки и отобразить таким образом на сайте. Но что если шрифт используется несколько раз? Значит нужно выполнить загрузку шрифтов в HTML.
Как правило, наполнение сайтов происходит в основном одним-двумя шрифтами для того, чтобы текст имел одинаковую структуру на всех страницах. Загрузку шрифтов в HTML страницы можно проводить разными способами. Некоторые из них представлены ниже:
Добавление шрифта с помощью дополнительного файла шрифтов.
Для выполнения нужно загрузить файл шрифтов, которые имеют форматы .ttf или .otf. После загрузки нужно открыть файл стилей и ближе к началу прописать следующую запись:
@font-face {
font-family: myfont;
src: url('/myfont.ttf');
}
В этой записи font-family обозначает название загружаемого шрифта, а src - это путь к файлу шрифтов, в данном случае файл шрифтов располагается там же, где и файл стилей.
Все бы хорошо, вот только браузеры IE не воспринимают шрифты стандартных форматов, поэтому для них нужно делать другое правило. Для начала, перевести формат ttf(otf) в eot, это можно сделать, например, на сайте - font2web.com. Затем загрузить дополнительный формат с тем же шрифтом и расширить запись в файле стилей:
/* только для Internet Explorer */
@font-face {
font-family: myfont;
src: url('/myfont.eot');
}
/* далее для всех остальных браузеров */
@font-face {
font-family: myfont;
src: url('/myfont.ttf');
}
Преимуществом данного способа является то, что таким образом можно загрузить практически любой шрифт. Минусом же будет то, что некоторые размеры шрифтов достаточно большие, что может отрицательно повлиять на загрузку сайта.
Загрузка шрифтов через сервис Google.
Данный способ использовать гораздо проще, чтобы использовать загрузку шрифтов в HTML из библиотеки Google достаточно в основном файле сайта HTML(PHP):
<link href='http://fonts.googleapis.com/css?family=Rye' rel='stylesheet' type='text/css'>
А затем в файле стилей просто указывать шрифт: font-family: 'Rye'
Кроме того, импорт шрифтом можно выполнить в самом CSS-файле:
@import url(http://fonts.googleapis.com/css?family=Rye:100,300,700|Satisfy);
body { font-family: 'Rye', cursive; font-size: 100px; }
Данный способ снижает время загрузки шрифтов за счет того, что они находятся на других серверах. Однако, к сожалению, библиотека кириллических шрифтов в Google достаточно небольшая.
Если Вы знаете другие способы загрузки шрифтов, напишите их в комментариях.
