Користење на сопствени фонтови на веб-страници
Содржината на текст отсекогаш била важен дел од веб-страниците, но во раните денови на Интернет, дизајнерите и програмерите биле строго ограничени во типографската контрола што ја имале над нивните веб-страници. Ова вклучуваше ограничување на фонтовите кои тие можеа да ги користат на своите сајтови. Веројатно сте слушнале за терминот "веб-безбедни фонтови" споменати во минатото. Ова се однесуваше на малиот фонт на фонтови, кои беа многу веројатно да бидат вклучени на компјутерот на лицето, што значи дека ако страницата користи еден од тие фонтови, тоа беше безбедно залог што ќе се прави правилно во прелистувачот на лицето.
Денес, веб-професионалци имаат голем број на нови фонтови и тип опции за работа, од кои еден е WOFF формат.
Што е WOFF?
WOFF е акроним кој се залага за "Web Open Font Format." Се користи за компресирање на фонтови за употреба со CSS @ font-face сопственост. Тоа е начин да ги вградите фонтовите во веб-страници, така што ќе можете да користите специјализирани фонтови надвор од типичниот "Arial, Times New Roman, Georgia" - кои се некои од горенаведените веб-фонтови.
WOFF беше доставен до W3C како стандард за пакување на фонтови за веб страници. Стана работен нацрт на 16 ноември 2010 година. Денес ние всушност имаме WOFF 2.0, што ја подобрува компресијата од првата верзија на формат за речиси 30%. Во некои случаи, овие заштеди можат да бидат уште посуштински!
Зошто да користите WOFF?
Веб фонтови, вклучувајќи ги и оние што се испорачуваат преку WOFF формат, обезбедуваат многу предности во однос на другите избори на фонт. Колку што е корисно како оние веб-безбедни фонтови, и секако постои место за тие фонтови во нашата работа, убаво е и проширувањето на нашите избори и отворање на нашите типографски опции.
WOFF фонтовите ги имаат следниве предности:
- Тие се подостапни од фонтовите како слики. WOFF стилови обичен HTML текст со CSS, кој ви дава пристапност и контрола на дизајнот што сликите нема да дозволат.
- WOFF-датотеките вклучуваат типографски информации како контекстуални форми и бројки од стариот стил. Ова им дава на вашите веб-страници подобра типографија, бидејќи ги користите правилните знаци, а не само приближувања.
- WOFF фонтовите можат да помогнат при интернационализација, бидејќи можете да вградите фонтови со знаци од други јазици.
- Како и сите CSS стилизирани текст, фонтови стилизирани со WOFF се повеќе пребарувач пријателски. Пребарувачите не "гледаат" текст вграден во слика, и додека текстот ALT може да помогне, не постои замена за самиот текст.
- WOFF фонтовите се компресирани, така што тие се помали од другите типови на фонтови. Ова ќе помогне со брзината на преземање на веб-страницата и целокупните перформанси.
- Можете да ги користите WOFF-датотеките за да го зачувате идентитетот на вашиот бренд со вградување на корпоративните фонтови како WOFF-датотеки.
Поддршка на WOFF Browser
WOFF има одлична поддршка за прелистувачот во современите прелистувачи, вклучувајќи:
- Хром 6+
- Firefox 3.6+
- Internet Explorer 9+
- Opera 11.1+
- Safari 5.1+
Тоа е суштински поддржан од целиот одбор овие денови, со осамен исклучок се сите верзии на Opera Mini.
Како да ги користите WOFF фонтовите
За да користите WOFF-датотека, треба да испратите датотека WOFF на вашиот веб-сервер, дајте име со името @ font-face, а потоа да го повикате фонтот во вашиот CSS. На пример:
- Поставете го фонтот наречен myWoffFont.woff во директориумот / fonts на веб серверот.
- Во вашата CSS датотека додадете @ фонт-лице секција:
@ font-face {
font-family: myWoffFont;
src: url ('/ fonts / myWoffFont.woff') формат ('woff');
}
- Додајте го новото име на фонтот (myWoffFont) во вашиот CSS фонт, како што би било друго име на фонт:
p {
font-family: myWoffFont , Женева, Arial, Helvetica, sans-serif;
}
Каде да добиете WOFF фонтови
Постојат две одлични места каде можете да најдете многу WOFF фонтови кои се бесплатни за комерцијална и некомерцијална употреба:
- Отвори ја фонт библиотека
- Font Squirrel
Ако имате лиценца за користење на фонт кој не е достапен во WOFF формат, можете да го користите WOFF творецот како на Font Squirrel за да ги конвертирате вашите фонтови во WOFF-датотеки. Исто така, постои алатка за командна линија наречена sfnt2woff која можете да ја користите на Macintosh и Windows за да ги конвертирате вашите TrueType / OpenType фонтови во WOFF.
Преземете ја бинарната апликација соодветна на вашиот систем и стартувајте ја во командната линија (или терминал) и следете ги инструкциите.
WOFF Пример
Еве неколку примери на WOFF-датотеки: WOFF страница на HTML5 за 24 часа.
Авторски напис од Џенифер Крајнин. Уредено од Џереми Жирар на 7.11.17