Press shift question mark to access a list of keyboard shortcuts
Этот скринкаст является частью нашей серии CSS AtoZ. Вы можете найти другие записи серии здесь .
расшифровка
В предыдущем эпизоде мы рассмотрели все виды свойств для оформления текста.
В современных браузерах и в IE до версии 4 мы можем добавлять пользовательские шрифты для улучшения дизайна наших сайтов.
Мы можем использовать различные функции этих пользовательских шрифтов, чтобы повысить производительность и улучшить типографику в целом.
В этом эпизоде мы узнаем:
- О пользователе
@font-faceat-rule - И как контролировать типографику с помощью стеков шрифтов и
unicode-range
@font-face
Раньше выбор шрифта в Интернете ограничивался небольшим количеством «безопасных для сети» шрифтов, таких как:
- Arial
- Comic Sans
- Новый Курьер
- Грузия
- Влияние
- Palatino
- Tahoma
- Times New Roman
- Требушет
- Verdana
Некоторые из них являются отличными шрифтами и действительно хорошо подходят для Интернета — Грузия как шрифт с засечками, а Arial или Verdana — отличные шрифты. Comic Sans, безусловно, не один из лучших …
Но теперь мы можем теперь использовать все виды пользовательских шрифтов и отображать их во всех браузерах с помощью @font-face .
Хотя мы можем это сделать, всегда стоит протестировать любые пользовательские шрифты в ряде операционных систем и браузеров, чтобы убедиться, что они выглядят так же хорошо, как и ожидалось.
Также имейте в виду, что файлы шрифтов могут быть довольно большими по размеру, поэтому используйте их с умом, чтобы избежать проблем с производительностью.
Синтаксис для @font-face выглядит следующим образом:
@font-face { font-family: 'Baskerville'; src: url('baskerville.eot?#iefix') format('embedded-opentype'); url('baskerville.woff') format('woff'); url('baskerville.ttf') format('truetype'); url('baskerville.svg#Baskerville') format('svg'); }
Шрифту присваивается имя со свойством font-family а затем для каждого из различных браузеров предоставляется ряд файлов и типов разных форматов.
Чтобы сохранить пользователей, загружающих шрифты, которые они уже имеют в своей системе, можно указать local() имя шрифта для поиска.
Чтобы создать все правильные форматы шрифта для разных браузеров, я использую фантастический онлайн-ресурс Font Squirrel .
У них есть генератор веб-шрифтов, и он работает как шарм. Предоставляемая ими загрузка также содержит все фрагменты кода для добавления этих пользовательских шрифтов в ваш CSS, что тоже очень удобно!
unicode-range
Каждый из символов в шрифте может быть описан их номером Unicode, который принимает форму:
U+0041
Строка «AtoZ CSS» может быть выражена в юникоде следующим образом:
A to Z space CSS U+0041 U+0074 U+006F U+005A U+0020 U+0043 U+0053 U+0053
Каждый символ, включая пробел, имеет уникальный номер Unicode. В набор символов UTF-8 встроен целый ряд специальных символов, которые могут быть полезны для добавления фигур и символов непосредственно в разметку.
При добавлении пользовательских шрифтов с помощью @font-face мы можем ограничить диапазон символов, к которым они применяются, что на первый @font-face звучит немного странно, но терпите меня.
Курсивный амперсанд шрифта Baskerville — это красота, и многие дизайнеры часто любят использовать его, даже если не используют остальную часть шрифта Baskerville.
Один из способов использования этого специального шрифта только для амперсандов — заключить их в тег span и установить для него другое font-family . Но это немного громоздко и может быть сделано без какой-либо дополнительной разметки вообще.
Мы можем создать шрифт, содержащий только этот символ, и добавить его в наш стек шрифтов в качестве первого шрифта в списке.
Когда браузер обнаруживает символы, которые не появляются в шрифте, он будет сканировать стек, пока не найдет шрифт, который содержит необходимые символы. Мы можем использовать это поведение, чтобы добавить специальный амперсанд при использовании любого нестандартного или безопасного веб-шрифта.
Сначала мы создаем правило @font-face для загрузки односимвольного шрифта. Я дам ему имя семейства font-family «Ampersand» и использую локальный источник для файлов шрифтов, чтобы сэкономить на пропускной способности.
Я укажу unicode-range как U+0026 для одиночного символа амперсанда. Можно указать целый диапазон символов, как предполагает имя свойства, но в этом случае нужен только один символ.
@font-face { font-family: 'Ampersand'; src: local('Baskerville-italic'); unicode-range: U+0026; }
В этом примере HTML-файла у меня есть серия заголовков и абзацев, которые содержат несколько амперсандов.
Я создам два разных стека шрифтов, один для заголовков и один для основной копии. В каждом случае первым шрифтом в стеке будет собственный шрифт «Ampersand».
Для заголовков я добавлю Museo, Rockwell или Serif в качестве запасного варианта.
Для тела я добавлю Avenir, Arial или Sans-Serif в качестве запасного варианта.
h1, h2 { font-family: 'Ampersand', 'Museo Slab', 'Rockwell', serif; } p { font-family: 'Ampersand', 'Avenir', 'Arial', sans-serif; }
Вот и все. Когда браузер отображает текст, первый шрифт в стеке содержит только символ амперсанда, поэтому он будет использовать следующий в списке (если он найден) для отображения оставшихся символов.
Поддержка браузером unicode-range хороша. Он поддерживается во всех современных браузерах, кроме Firefox и IE, начиная с версии 9. Поскольку это чисто визуальное улучшение, поддержка браузера не вызывает у меня большого беспокойства — неподдерживаемые браузеры просто получают первый в стеке шрифт, который может быть загрузить успешно.