Подключить шрифт
1-ый вариант (рекомендуемый)
Добавить пользовательский (нестандартный) шрифт можно через ключевое слово @font-face
.
@font-face {
font-family: 'FontName';
src: local('FontName'), url('font.woff2'); /* путь к шрифту */
}
/* применить подключенный шрифт */
p {
font-family: 'FontName';
}
Стоит обратить внимание на параметр local()
. Данный параметр пытается подключить шрифт с компьютера посетителя сайта, иначе он загружает и отображает шрифт из параметра url()
.
Если текст надо выделить жирным или курсивом, то надо подключить соответствующие шрифты для каждого стиля.
/* стандартный стиль шрифта */
@font-face {
font-family: 'FontName';
src: url('font.woff2');
}
/* для выделения жирным */
@font-face {
font-family: 'FontName';
font-weight: 700;
src: url('fontBOLD.woff2');
}
/* для выделения курсивом */
@font-face {
font-family: 'FontName';
font-style: italic;
font-weight: 400;
src: url('fontITALIC.woff2');
}
В коде выше загрузятся три разных шрифта (или один шрифт с тремя разными стилями).
Здесь стоит обратить внимание, что имена шрифтов везде одинаковы (свойство font-family
). Чтобы подключить шрифт с нужным стилем, надо добавить дополнительный параметр, который указан в определении шрифта.
/* задать стандартный шрифт */
body {
font-family: 'FontName';
}
/* подключить шрифт с жирным выделением */
strong {
font-weight: 700;
}
/* подключить шрифт с курсивным выделением */
em {
font-style: italic;
font-weight: 400;
}
Рекомендуется подключать шрифты в формате WOFF2, т.к. это современный формат шрифтов. Если нужна поддержка Internet Explorer, то рекомендуется также подключать WOFF.
Шрифт TTF уже неактуален, он используется для поддержки старых браузеров.
Добавление собственного шрифта стало возможно с появлением CSS3.
2-ой способ
В первом варианте у всех подключаемых шрифтов задано одинаковое имя. Нужный стиль загружается в зависимости от наличия CSS-свойства.
Также можно подключить нужный стиль шрифта, не указывая дополнительных CSS-свойств, а просто указав имя.
/* Подключение шрифтов */
@font-face {
font-family: 'FontName';
src: url('font.woff2');
}
@font-face {
font-family: 'FontNameBold';
src: url('fontBOLD.woff2');
}
@font-face {
font-family: 'FontNameItalic';
src: url('fontITALIC.woff2');
}
/* Применение шрифтов (для каждого стиля своё название) */
body { font-family: 'FontName' }
strong { font-family: 'FontNameBold' }
em { font-family: 'FontNameItalic' }
Данный вариант неудобен тем, что надо будет запоминать названия нескольких шрифтов, вместо того, чтобы использовать стандартное CSS-свойство, например, font-weight
.
Поддержать автора
Все статьи создаются и поддерживаются одним человеком,
если вам нравится контент, вы можете поддержать автора сайта