@font-faceПравило дозвољава цустом фонтови да се учита на веб страници. Једном додано у табелу стилова, правило налаже прегледачу да преузме фонт са места на којем је хостован, а затим га приказује како је наведено у ЦСС-у.
Без правила, наши дизајни су ограничени на фонтове који су већ учитани на рачунар корисника и који се разликују у зависности од система који се користи. Ево лепе анализе постојећих системских фонтова.
Најдубља могућа подршка за прегледач
Ово је метода са најдубљом могућом подршком тренутно. @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; )Практични ниво подршке прегледача
Ствари се јако померају према ВОФФ-у и ВОФФ-у 2, тако да се вероватно можемо извући:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); )| Хром | Сафари | Фирефок | Опера | ИЕ | Андроид | иОС |
|---|---|---|---|---|---|---|
| 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'); )| Хром | Сафари | Фирефок | Опера | ИЕ | Андроид | иОС |
|---|---|---|---|---|---|---|
| 3.5+ | 3+ | 3.5+ | 10.1+ | 9+ | 2.2+ | 4.3+ |
Супер напредна подршка за прегледаче
Ако фарму стављамо на ВОФФ, онда можемо очекивати да се ствари у неком тренутку промене према ВОФФ2. То значи да можемо живети на ивици која крвари са:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'); )| Хром | Сафари | Фирефок | Опера | ИЕ | Андроид | иОС |
|---|---|---|---|---|---|---|
| 36+ | Не | 35+ са заставом | 23+ | Не | 37 | Не |
Алтернативне технике
@import
Иако @font-faceје одличан за фонтове који се хостују на нашим сопственим серверима, можда постоје ситуације када је решење за хостовани фонт боље. Гоогле фонтови ово нуде као начин употребе њихових фонтова. Следи пример коришћења @importза учитавање фонта Опен Санс из Гоогле Фонтс:
@import url(//fonts.googleapis.com/css?family=Open+Sans);Тада га можемо користити за обликовање елемената:
body ( font-family: 'Open Sans', sans-serif; )Ако отворите УРЛ за фонт, заправо можете видети сав @font-faceпосао који се ради иза сцене.
Предност употребе хостоване услуге је та што ће вероватно укључити све варијације датотека фонтова, што осигурава дубоку компатибилност више прегледача, а да сами не хостујемо све те датотеке.
Погледајте оловку помоћу @импорт за прилагођене фонтове компаније ЦСС-Трицкс (@ цсс-трицкс) на ЦодеПен-у.
израда табеле стилова
Слично томе, могли бисте да повежете исто средство као и било коју другу ЦСС датотеку, у ХТМЛ документу, а не у ЦСС-у. Користећи исти пример из Гоогле фонтова, ево шта бисмо користили:
Затим можемо обликовати своје елементе као и друге методе:
body ( font-family: 'Open Sans', sans-serif; )Опет, ово је увоз @font-faceправила, али уместо да их убризгнемо у нашу листу стилова, она се уместо тога додају у наш ХТМЛ .
Погледајте Оловку за прилагођене фонтове компаније ЦСС-Трицкс (@ цсс-трицкс) на ЦодеПен-у.
Ради се о истој ствари ... обе технике преузимају потребне ресурсе.
Разумевање типова датотека фонтова
Оригинални исечак на врху овог поста упућује на пуно датотека са необичним наставцима. Пређимо на сваки од њих и боље разумемо шта они значе.
ВОФФ / ВОФФ2
Значи за: Веб Опен Фонт Формат.
Створени за употребу на мрежи, а развио их је Мозилла заједно са другим организацијама, ВОФФ фонтови се често учитавају брже од осталих формата, јер користе компримовану верзију структуре коју користе фонтови ОпенТипе (ОТФ) и ТруеТипе (ТТФ). Овај формат такође може садржати метаподатке и информације о лиценци у датотеци фонта. Чини се да је овај формат победник и тамо где су сви прегледачи усмерени.
ВОФФ2 је следећа генерација ВОФФ-а и има бољу компресију од оригиналне.
СВГ / СВГЗ
Станд фор: Прилагодљива векторска графика (фонт)
СВГ је векторска поновна израда фонта, што га чини много лакшим у величини датотеке, а такође га чини идеалним за мобилну употребу. Овај формат је једини који дозвољава верзија 4.1 и старије верзије Сафари-а за иОС. СВГ фонтове тренутно не подржавају Фирефок, ИЕ или ИЕ Мобиле. Фирефок је одложио имплементацију на неодређено време како би се усредсредио на ВОФФ.
СВГЗ је зигована верзија СВГ-а.
ЕОТ
Представља: Уграђени отворени тип.
Овај формат је креирао Мицрософт (оригинални иноватори компаније @font-face) и представља власнички стандард датотека који подржава само ИЕ. У ствари, то је једини формат који ће ИЕ8 и старији препознати приликом употребе @font-face.
ОТФ / ТТФ
Означава: ОпенТипе фонт и ТруеТипе фонт.
ВОФФ формат је у почетку створен као реакција на ОТФ и ТТФ, делимично и због тога што би се ови формати могли лако (и илегално) копирати, међутим, ОпенТипе има могућности које би многе дизајнере могле занимати (лигатуре и слично).
Напомена о перформансама
Веб фонтови су одлични за дизајн, али важно је разумети и њихов утицај на веб перформансе. Прилагођени фонтови често доводе до тога да веб локације постигну успешност јер фонт мора бити преузет пре него што се прикаже.
Уобичајени симптом био је кратак тренутак када се фонтови прво учитају као резервни, а затим трепћу преузетим фонтом. Паул Ирисх о томе има старији пост (назван „ФОУТ“: Фласх Оф Унстилед Тект).
Данас прегледачи обично сакривају текст пре него што се прилагођени фонт подразумевано учита. Боље или горе? Ти одлучујеш. Можете извршити одређену контролу над овим путем различитих техника. Мало је изван домета овог чланка, али ево три чланака Зацха Леатхермана како бисте започели низ зечју рупу:
- Боље @ фонт-фаце са Фонт Лоад Евентс
- Како одговорно користимо веб фонтове или, избегавајући @ фонт-фаце-палм
- Фласх оф Фаук Тект - још више о учитавању фонтова
Ево још неких разматрања приликом примене прилагођених фонтова:
Пазите на величину датотеке
Фонтови могу бити изненађујуће тешки, зато се приклоните опцијама које нуде лакше верзије. На пример, фаворизујте скуп фонтова који је 50КБ у односу на онај који тежи 400КБ.
Ако је могуће, ограничите скуп знакова
Да ли вам заиста требају подебљани и црни пондери за један фонт? Ограничавање скупова фонтова да учитавају само оно што се користи добра је идеја и овде има неколико добрих савета.
Размотрите системске фонтове за мале екране
Многи уређаји су заглављени на усраним везама. Један трик може бити циљање већих екрана приликом учитавања прилагођеног фонта помоћу @media.
У овом примеру, екранима мањим од 1000 пиксела уместо тога послужиће системски фонт, а екранима широким и вишим прилагођени фонт.
@media (min-width: 1000px) ( body ( font-family: 'FontName', Fallback, sans-serif; ) )Фонт Сервицес
Постоји велики број услуга које ће угостити фонтове и омогућити приступ фонтовима са комерцијалном лиценцом. Предности коришћења услуге често се своде на то да се велики избор легалних фонтова испоручује ефикасно (нпр. Услуживање на брзом ЦДН-у).
Ево неколико хостинг услуга фонтова:
- Цлоуд Типографија
- Типекит
- Фонтдецк
- Вебтипе
- Фонтспринг
- Типотека
- Фонтс.цом
- Гоогле фонтови
- Фонт Скуиррел
Шта је са фонтовима икона?
Истина је, @ фонт-фаце може учитати датотеку фонта пуну икона које се могу користити за систем икона. Међутим, мислим да вам је много боље да користите СВГ као систем икона. Ево поређења две методе.
Више ресурса
- Основе АПИ-ја Гоогле Фонт
- ЦСС породице фонтова