Здравствуйте! На прошлом уроке мы начали знакомство с шрифтами CSS. Сегодня рассмотрим как подключить экзотические шрифты к веб-странице.
Не всегда стандартные встроенные шрифты, как Arial или Verdana, могут быть удобны. Нередко встречается ситуация, когда веб-дизайнер хочет воспользоваться возможностями какого-то другого шрифта, которого нет среди встроенных, но который доступен из внешнего файла. Такой шрифт можно подключить с помощью директивы font-face:
@font-face {
font-family: 'Roboto';
src: url(http://fonts.gstatic.com/s/roboto/v15/mErvLBYg_cXG3rLvUsKT_fesZW2xOQ-xsNqO47m55DA.woff2);
}
Свойство font-family задает название шрифта, а свойство src - путь к шрифту.
В данном случае веб-страница будет подгружать шрифт, который расположен в интернете по адресу http://fonts.gstatic.com/s/roboto/v15/mErvLBYg_cXG3rLvUsKT_fesZW2xOQ-xsNqO47m55DA.woff2
В качестве альтернативы мы можем загрузить файл шрифта на локальный компьютер и уже оттуда подгружать его на веб-страницу. Как правило, для хранения своих шрифтов рядом с веб-страницей создается папка fonts:
@font-face{
font-family: 'Roboto';
src:url('fonts/roboto.ttf');
}
После подключения шрифта, его можно использовать в стилях:
p {
font-family: Roboto;
}
В данном случе используется шрифт Roboto, созданный компанией Google и определенный в файле в формате woff2. Однако не все браузеры поддерживают данный формат шрифтов.
Грубо говоря, существует несколько различных форматов шрифтов: TrueType ( расширение ttf), Open Type (расширение otf), Embedded Open Type (расширение eot), Web Open Font Format (woff/woff2), Scalable Vector Graphic (svg). Разные браузеры могут поддерживать разные шрифты. И чтобы решить проблему поддержки шрифтов создатели шрифта часто создают сразу несколько форматов. И мы можем сразу эти форматы определить. Например:
@font-face {
font-family:'FontAwesome';
src: url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/fonts/fontawesome-webfont.eot');
src: url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/fonts/fontawesome-webfont.woff2') format('woff2'),
url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/fonts/fontawesome-webfont.woff') format('woff'),
url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/fonts/fontawesome-webfont.ttf') format('truetype'),
url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/fonts/fontawesome-webfont.svg') format('svg');
}
Как и в предыдущем случае свойства font-family и src задают название и путь к шрифту. Но теперь также для совместимости добавляется еще одно свойство src. Второе свойство src устанавливает сразу несколько шрифтов. Первым шрифтом также идет шрифт в формате EOT, но теперь к расширению файла .eot добавляется значение ?#iefix. Это делается для совместимости с версиями Internet Explorer 6–8. Если после .eot не будет добавляться это значение, то шрифт может неправильно отображаться в Internet Explorer 6-8.
После параметра url идет определение формата шрифта:
format('embedded-opentype')
Когда браузер начнет загружать веб-страницу, на которой таким образом определен шрифт, то браузер не будет подгружать все шрифты во всех форматах, а загрузит только первый шрифт, который для него окажется понятным. Читать далее
Вступите в группу, и вы сможете просматривать изображения в полном размере
Это интересно
+1
|
|||
Последние откомментированные темы:
-
Лучший чат-бот с искусственным интеллектом - какой из них вам подходит?
(1)
boris 1
,
13.01.2022
-
Новогоднее украшение рабочего стола ПК
(1)
Елена2022
,
21.12.2021
-
Как JPG преобразовать в Word с распознаванием текста
(1)
Olejaweb
,
13.11.2021
-
Как вернуть классическое ленточное меню в проводник Windows 11
(1)
Сергей Михайлов сын
,
26.10.2021
20250425105525