Из-за того, что @ font-face может быть слишком сложным, он не завоевал должного внимания. Как только вы начнете читать о лицензировании, различных форматах шрифтов, совместимости браузеров, это может стать проблемой, чем стоит.
Но через пять минут я постараюсь максимально упростить процесс работы с пользовательскими шрифтами. Такие сервисы, как Font Squirrel, помогают сделать задачу легкой!
Финальный CSS
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
@font-face {
font-family: ‘blok-regular’;
src: url(‘type/Blokletters-Potlood.eot’);
src: local(‘Blokletters Potlood Potlood’),
local(‘Blokletters-Potlood’),
url(‘type/Blokletters-Potlood.ttf’) format(‘truetype’);
}
@font-face {
font-family: ‘blok-italic’;
src: url(‘type/Blokletters-Balpen.eot’);
src: local(‘Blokletters Balpen Balpen’),
local(‘Blokletters-Balpen’),
url(‘type/Blokletters-Balpen.ttf’) format(‘truetype’);
}
@font-face {
font-family: ‘blok-heavy’;
src: url(‘type/Blokletters-Viltstift.eot’);
src: local(‘Blokletters Viltstift Viltstift’),
local(‘Blokletters-Viltstift’),
url(‘type/Blokletters-Viltstift.ttf’) format(‘truetype’);
}
h1 { font-family: blok-heavy, helvetica, arial;
|
Заметьте, как мы ссылаемся на шрифты .eot и .ttf? Это потому, что, конечно, Internet Explorer использует только свой собственный формат, который еще не завоевал популярность. Таким образом, мы должны сначала импортировать этот файл .eot, а затем перейти к различным форматам для Firefox, Safari и т. Д. Важно сначала загрузить версию .eot.
Далее мы ищем шрифт на компьютере пользователя, используя атрибут «local». Если он не найден, только тогда мы передаем URL, который загрузит шрифт.
Почему IE не пытается загрузить шрифты TTF?
Это было определенно проблемой. Если Explorer не может работать с форматом TrueType, мы не хотим тратить время на загрузку шрифта. К счастью, из-за всех этих локальных атрибутов и запятых IE ничего не поймет. Таким образом, он просто пропустит все строки, используя только версию .eot.
- Подпишитесь на нас в Твиттере или подпишитесь на ленту Nettuts + RSS для получения лучших учебных материалов по веб-разработке.