В @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работа, извършена зад кулисите.
Предимството на използването на хоствана услуга е, че е вероятно да включва всички вариации на шрифтовите файлове, което осигурява дълбока съвместимост на различни браузъри, без да се налага да хостваме всички тези файлове сами.
Вижте Pen с помощта на @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
Представлява: Формат на шрифта за отворен уеб.
Създадени за използване в мрежата и разработени от 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
Стои за: Вграден отворен тип.
Този формат е създаден от Microsoft (оригиналните новатори на @font-face) и е стандартен файлов формат, поддържан само от IE. Всъщност това е единственият формат, който IE8 и по-долу ще разпознаят при използване @font-face.
OTF / TTF
Представлява за: шрифт OpenType и шрифт TrueType.
Форматът WOFF първоначално е създаден като реакция на OTF и TTF, отчасти, защото тези формати могат лесно (и незаконно) да бъдат копирани, но OpenType има възможности, от които много дизайнери биха могли да се интересуват (лигатури и подобни).
Бележка за изпълнението
Уеб шрифтовете са чудесни за дизайн, но е важно да се разбере и тяхното въздействие върху уеб производителността. Персонализираните шрифтове често карат сайтовете да постигнат изпълнение, тъй като шрифтът трябва да бъде изтеглен, преди да се покаже.
Често срещан симптом беше кратък момент, при който шрифтовете първо се зареждат като резервни, а след това мигат към изтегления шрифт. Пол Ирланд има по-стара публикация за това (наречена „FOUT“: Flash Of Unstyled Text).
В наши дни браузърите обикновено скриват текста преди потребителският шрифт да се зареди по подразбиране. По-добро или по-лошо? Ти решаваш. Можете да упражните известен контрол върху това чрез различни техники. Малко извън обхвата на тази статия, но ето една трифекта от статии на Zach Leatherman, за да започнете надолу по заешката дупка:
- По-добре @ font-face с Font Load Events
- Как използваме уеб шрифтовете отговорно или като избягваме @ font-face-palm
- Flash of Faux Text - още повече за зареждане на шрифта
Ето още някои съображения при внедряване на персонализирани шрифтове:
Гледайте размера на файла
Шрифтовете могат да бъдат изненадващо тежки, така че наклонете се към опциите, които предлагат по-леки версии. Например, предпочитайте набор от шрифтове, който е 50KB спрямо този, който тежи 400KB.
Ограничете набора от символи, ако е възможно
Наистина ли се нуждаете от удебелените и черни тежести за един шрифт? Ограничаването на вашите набори шрифтове, за да зареждате само това, което се използва, е добра идея и тук има някои добри съвети за това.
Помислете за системни шрифтове за малки екрани
Много устройства са заседнали в скапани връзки. Един трик може да бъде насочването към по-големи екрани при зареждане на персонализиран шрифт с помощта @media.
В този пример на екрани, по-малки от 1000px, вместо това ще се покаже системен шрифт, а на екрани, които са широки и по-високи, ще се покаже персонализиран шрифт.
@media (min-width: 1000px) ( body ( font-family: 'FontName', Fallback, sans-serif; ) )Услуги за шрифтове
Има редица услуги, които ще хостват шрифтове и осигуряват достъп и до лицензирани с търговска цел шрифтове. Ползите от използването на услуга често се свеждат до това, че голям избор от легални шрифтове се доставят ефективно (например обслужването им на бърз CDN).
Ето няколко хоствани шрифтови услуги:
- Облачна типография
- Typekit
- Fontdeck
- Уебтип
- Fontspring
- Типотека
- Fonts.com
- Google шрифтове
- Шрифт катерица
Ами шрифтовете на иконите?
Вярно е, @ font-face може да зареди файл с шрифт, пълен с икони, които могат да се използват за система от икони. Мисля обаче, че е много по-добре да използвате SVG като система за икони. Ето сравнение на двата метода.
Още ресурси
- Основи на Google Font API
- CSS семейства шрифтове