Коришћење прилагођених фонтова на веб страницама
Садржај текста је увек био важан део веб локација, али у раним данима Веба дизајнери и програмери су били строго ограничени у типографској контроли коју су имали преко својих веб страница. Ово укључује ограничење фонтова које су могли поуздано користити на својим сајтовима. Вероватно сте чули израз "веб безбедни фонтови" поменути у прошлости. Ово се односило на мали скуп фонтова који су вероватно били укључени на рачунар особе, што значи да ако сте сајт користили један од тих фонтова, било је сигурно оптерећење које би се исправно приказало на претраживачу особе.
Данас професионалци на вебу имају мноштво нових фонтова и опција типа за рад, од којих је један ВОФФ формат.
Шта је ВОФФ?
ВОФФ је акроним који означава "Веб Опен Фонт Формат". Користи се за компресовање фонтова за коришћење са ЦСС @ фонт-фаце својством. То је начин да уградите фонтове на веб странице тако да можете користити специјализиране фонтове изван типичног "Ариал, Тимес Нев Роман, Георгиа" - који су неки од наведених веб безбедних фонтова.
ВОФФ је достављен В3Ц као стандард за паковање фонтова за веб странице. Он је постао радни нацрт 16. новембра 2010. Данас имамо заправо ВОФФ 2.0, што побољшава компресију из прве верзије формата за скоро 30%. У неким случајевима, ове уштеде могу бити још суштински!
Зашто користити ВОФФ?
Веб фонтови, укључујући и оне који се испоручују путем ВОФФ формата, пружају мноштво предности у односу на друге фонтове. Користан као и они веб безбедни фонтови, а сигурно је и даље мјесто за ове фонтове у нашем раду, лепо је и проширити наш избор и отворити наше типографске опције.
ВОФФ фонтови имају следеће предности:
- Они су приступачнији од фонтова као слике. ВОФФ стилови обични ХТМЛ текст са ЦСС-ом, омогућавају вам приступачност и контролу дизајна коју слике не дозвољавају.
- ВОФФ датотеке укључују типографске информације као што су контекстуалне форме и старе фигуре. То даје вашим веб странама бољу типографију јер користите исправне знакове, а не само апроксимације.
- ВОФФ фонтови могу помоћи у интернационализацији јер можете уградити фонтове са ликовима са других језика.
- Као и сви текстови ЦСС-а, фонтови створени ВОФФ-ом су више пријатељски прилагођени претраживачима. Претраживачи не виде "текст" који је уграђен у слику, а док АЛТ текст може помоћи, не постоји замена за сам текст.
- ВОФФ фонтови су компримовани, тако да су мањи од других врста датотека. Ово ће помоћи при брзини преноса сајта и укупним перформансама.
- Можете користити ВОФФ датотеке да бисте сачували свој идентитет бренда уграђивањем корпоративних фонтова као ВОФФ датотека.
ВОФФ Бровсер подршка
ВОФФ има одличну подршку претраживачу у модерним претраживачима, укључујући:
- Цхроме 6+
- Фирефок 3.6+
- Интернет Екплорер 9+
- Опера 11.1+
- Сафари 5.1+
У суштини је подржан у целом форуму ових дана, са изузетним изузетком, све верзије Опера Мини.
Како користити ВОФФ фонтове
Да бисте користили ВОФФ датотеку, морате уплоадовати ВОФФ датотеку на свој веб сервер, дати име именом @ фонт-фаце својство, а затим позвати фонт у свој ЦСС. На пример:
- Отпремите фонт под називом миВоффФонт.вофф у / фонтс директоријум на веб серверу.
- У вашој ЦСС датотеки додајте одјељак @ фонт-фаце:
@ фонт-фаце {
фонт-фамили: миВоффФонт;
срц: урл ('/ фонтс / миВоффФонт.вофф') формат ('вофф');
}
- Додајте ново име фонта (миВоффФонт) у ваш ЦСС фонт стацк, као и било које друго име фонта:
п {
фонт-фамили: миВоффФонт , Генева, Ариал, Хелветица, санс-сериф;
}
Где добити ВОФФ Фонтове
Постоје два изврсна места на којима можете наћи многе ВОФФ фонтове који су бесплатни за комерцијалну и некомерцијалну употребу:
- Отворите библиотеку фонтова
- Фонт Веверица
Ако имате лиценцу за кориштење фонта који није доступан у ВОФФ формату, можете користити ВОФФ креатор као у Фонт Скуиррел-у како бисте конвертовали своје датотеке фонта у ВОФФ датотеке. Постоји и алатка за командну линију звану сфнт2вофф коју можете користити на Мацинтосх и Виндовсу за претварање фонтова ТруеТипе / ОпенТипе у ВОФФ.
Преузмите бинарни систем који одговара вашем систему и покрените га на командној линији (или терминалу) и пратите упутства.
Пример ВОФФ-а
Ево неколико примера ВОФФ датотека: ВОФФ страница на ХТМЛ5 за 24 сата.
Оригинални чланак Јеннифер Кринин. Уредио Јереми Гирард на 11.7.17