@font-faceПравило дозволяє призначені для користувача шрифти повинні бути завантажені на веб - сторінці. Після додавання до таблиці стилів правило вказує браузеру завантажити шрифт з того місця, де він розміщений, а потім відобразити його, як зазначено в CSS.
Без правила наші конструкції обмежуються шрифтами, які вже завантажені на комп'ютер користувача, і вони різняться залежно від використовуваної системи. Ось приємна розбивка існуючих системних шрифтів.
Найглибша підтримка браузера
Це метод із найглибшою підтримкою, що можлива зараз. @font-faceПравило повинне бути додано до таблиці стилів перед будь-якими стилями.
@font-face ( font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff2') format('woff2'), /* Super Modern Browsers */ url('webfont.woff') format('woff'), /* Pretty Modern Browsers */ url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ )Потім використовуйте його для стилювання таких елементів:
body ( font-family: 'MyWebFont', Fallback, sans-serif; )Практичний рівень підтримки браузера
Справа сильно зміщується у бік WOFF та WOFF 2, тому ми, мабуть, можемо уникнути:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); )| Chrome | Сафарі | Firefox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 5+ | 5.1+ | 3,6+ | 11.50+ | 9+ | 4,4+ | 5.1+ |
Трохи глибша підтримка браузера
Якщо вам потрібен якийсь щасливий засіб між повною підтримкою та практичною підтримкою, це охопить ще кілька основ:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'), url('myfont.ttf') format('truetype'); )| Chrome | Сафарі | Firefox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 3,5+ | 3+ | 3,5+ | 10,1+ | 9+ | 2.2+ | 4.3+ |
Підтримка суперпрогресивного браузера
Якщо ми ставимо ферму на WOFF, то ми можемо очікувати, що в якийсь момент часу все зміниться до WOFF2. Це означає, що ми можемо жити на кровоточивому краю за допомогою:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'); )| Chrome | Сафарі | Firefox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 36+ | Ні | 35+ з прапором | 23+ | Ні | 37 | Ні |
Альтернативні техніки
@import
Хоча @font-faceвін відмінно підходить для шрифтів, розміщених на наших власних серверах, але в деяких випадках рішення для розміщених шрифтів є кращим. Google Fonts пропонує це як спосіб використання своїх шрифтів. Нижче наведено приклад використання @importдля завантаження шрифту Open Sans із Google Fonts:
@import url(//fonts.googleapis.com/css?family=Open+Sans);Тоді ми можемо використовувати його для стилізації елементів:
body ( font-family: 'Open Sans', sans-serif; )Якщо відкрити URL-адресу шрифту, ви зможете побачити всю @font-faceроботу, що робиться за кадром.
Перевага використання розміщеної служби полягає в тому, що вона, ймовірно, включатиме всі варіації файлів шрифту, що забезпечує глибоку сумісність між браузерами, без необхідності розміщувати всі ці файли самостійно.
Дивіться Перо з використанням @import щодо користувацьких шрифтів від CSS-Tricks (@ css-tricks) на CodePen.
створення таблиці стилів
Подібним чином ви можете посилатися на той самий ресурс, що і будь-який інший файл CSS, в документі HTML, а не в CSS. Використовуючи той самий приклад із Google Fonts, ми б використали ось що:
Потім ми можемо стилізувати наші елементи, як інші методи:
body ( font-family: 'Open Sans', sans-serif; )Знову ж таки, це імпорт @font-faceправил, але замість того, щоб вводити їх у нашу таблицю стилів, вони замість цього додаються до нашого HTML .
Див. Pen using для користувацьких шрифтів від CSS-Tricks (@ css-tricks) на CodePen.
Це приблизно одне і те ж ... обидва методи завантажують необхідні активи.
Розуміння типів файлів шрифтів
Оригінальний фрагмент у верхній частині цього допису посилається на багато файлів із дивними розширеннями. Давайте розглянемо кожну з них і краще зрозуміємо, що вони означають.
WOFF / WOFF2
Підтримує: Формат шрифта Web Open.
Створені для використання в Інтернеті та розроблені Mozilla спільно з іншими організаціями, шрифти WOFF часто завантажуються швидше, ніж інші формати, оскільки використовують стиснуту версію структури, що використовується шрифтами OpenType (OTF) та TrueType (TTF). Цей формат також може містити метадані та інформацію про ліцензію у файлі шрифту. Цей формат, здається, є переможцем і там, куди спрямовуються всі браузери.
WOFF2 - це наступне покоління WOFF і може похвалитися кращим стисненням, ніж оригінал.
SVG / SVGZ
Підставки для: масштабована векторна графіка (шрифт)
SVG - це векторне відтворення шрифту, що робить його набагато легшим за розміром файлу, а також робить його ідеальним для мобільного використання. Цей формат є єдиним, дозволеним версією 4.1 і нижче Safari для iOS. На даний момент шрифти SVG не підтримуються Firefox, IE або IE Mobile. Firefox відклав впровадження на невизначений час, щоб зосередитися на WOFF.
SVGZ - це версія SVG на архіві.
EOT
Підставки для: вбудованого відкритого типу.
Цей формат був створений корпорацією Майкрософт (оригінальними новаторами Росії @font-face) і є запатентованим стандартом файлів, що підтримується лише IE. Насправді це єдиний формат, який IE8 і нижче розпізнають при використанні @font-face.
OTF / TTF
Підтримує: шрифт OpenType та шрифт TrueType.
Формат WOFF був спочатку створений як реакція на OTF та TTF, частково, тому що ці формати можна було легко (і незаконно) скопіювати, однак OpenType має можливості, які можуть зацікавити багатьох дизайнерів (лігатури тощо).
Примітка щодо продуктивності
Веб-шрифти чудово підходять для дизайну, але важливо також розуміти їх вплив на продуктивність мережі. Спеціальні шрифти часто змушують сайти отримувати показники продуктивності, оскільки шрифт потрібно завантажити, перш ніж він відображатиметься.
Поширеним симптомом був короткий момент, коли шрифти спочатку завантажуються як резервні, а потім моргають завантаженим шрифтом. Про це у Пола Ірландського є старіша публікація (охрещена “FOUT”: Flash Of Unstyled Text).
У наші дні браузери зазвичай приховують текст до завантаження спеціального шрифту за замовчуванням. Краще чи гірше? Тобі вирішувати. Ви можете здійснити певний контроль над цим за допомогою різних технік. Трохи вийшов за межі цієї статті, але ось тріфекта статей Зака Левермана, щоб ви почали кроличу нору:
- Краще @ font-face за допомогою Font Load Events
- Як ми відповідально використовуємо веб-шрифти, або, уникаючи @ font-face-palm
- Спалах штучного тексту - ще більше про завантаження шрифтів
Ось ще кілька міркувань при реалізації користувацьких шрифтів:
Стежте за розміром файлу
Шрифти можуть бути напрочуд важкими, тому схиляйтесь до варіантів, які пропонують легші версії. Наприклад, надайте перевагу набору шрифтів розміром 50 КБ порівняно із шрифтом, який важить 400 КБ.
Обмежте набір символів, якщо це можливо
Вам справді потрібні жирні та чорні ваги для одного шрифту? Обмежувати набори шрифтів, щоб завантажувати лише те, що використовується, є хорошою ідеєю, і тут є кілька хороших порад щодо цього.
Розглянемо системні шрифти для малих екранів
Багато пристроїв застрягли на підступних з’єднаннях. Однією хитрістю може бути націлювання на більші екрани під час завантаження спеціального шрифту за допомогою @media.
У цьому прикладі екрани розміром менше 1000 пікселів будуть використовуватися системним шрифтом, а екрани шириною і вище - спеціальним.
@media (min-width: 1000px) ( body ( font-family: 'FontName', Fallback, sans-serif; ) )Послуги шрифтів
Існує ряд служб, які розміщують шрифти та забезпечують доступ до комерційно ліцензованих шрифтів. Переваги використання послуги часто зводяться до того, що великий вибір легальних шрифтів доставляється ефективно (наприклад, обслуговування їх на швидкому CDN).
Ось кілька розміщених служб шрифтів:
- Хмарна типографіка
- Typekit
- Фондек
- Веб-тип
- Fontspring
- Типотека
- Fonts.com
- Google шрифти
- Шрифт Білка
А як щодо шрифтів значків?
Це правда, @ font-face може завантажувати файл шрифту, повний значків, який можна використовувати для системи значків. Однак, я думаю, вам набагато краще використовувати SVG як систему значків. Ось порівняння двох методів.
Більше ресурсів
- Основи API Google Font
- Сімейства шрифтів CSS