Използване на персонализирани шрифтове в уеб страници
Текстовото съдържание винаги е било важна част от уебсайтовете, но в първите дни на уеб дизайнерите и разработчиците бяха силно ограничени в типографския контрол , който имаха над своите уеб страници. Това включваше ограничения в шрифтовете, които те успели да използват надеждно на сайтовете си. Вероятно сте чули термина "уеб-безопасни шрифтове", споменат в миналото. Това се отнася до малкия набор от шрифтове, които е много вероятно да бъдат включени в компютъра на човек, което означава, че ако сайтът е използвал едно от тези шрифтове, това е сигурен залог, че ще се направи правилно в браузъра на човека.
Днес, уеб специалистите имат множество нови шрифтове и опции за тип, с които да работите, един от които е 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 Поддръжка на браузъри
WOFF има отлична поддръжка на браузърите в съвременните браузъри, включително:
- Chrome 6+
- Firefox 3.6+
- Internet Explorer 9+
- Opera 11.1+
- Сафари 5.1+
По същество това се подкрепя навсякъде, като самото изключение са всички версии на Opera Mini.
Как да използвате WOFF шрифтове
За да използвате WOFF файл, трябва да качите WOFF файл на вашия уеб сървър, да му дадете име с @ property-font-face, а след това да се обадите на шрифта в CSS. Например:
- Качете шрифта myWoffFont.woff в директорията / fonts на уеб сървъра.
- В CSS файла добавете секция @ font-face:
@ font-face {
шрифт-семейство: myWoffFont;
src: url ('/ fonts / myWoffFont.woff') формат ('woff');
}
- Добавете новото име на шрифта (myWoffFont) във вашия CSS font font, както и всяко друго име на шрифт:
p {
шрифт-семейство: myWoffFont , Женева, Arial, Helvetica, sans-serif;
}
Къде да получите WOFF шрифтове
Има две страхотни места, където можете да намерите много WOFF шрифтове, които са безплатни за търговски и нетърговски цели:
- Отворете библиотеката с шрифтове
- Скачалка на шрифта
Ако имате лиценз за използване на шрифт, който не е наличен във формат WOFF, можете да използвате създател на WOFF като на Font Squirrel, за да конвертирате файловете с шрифтове в WOFF файлове. Също така има инструмент за команден ред, наречен sfnt2woff, който можете да използвате на Macintosh и Windows, за да конвертирате вашите TrueType / OpenType шрифтове в WOFF.
Изтеглете двоичното, което е подходящо за вашата система и го стартирайте на командния ред (или терминал) и следвайте инструкциите.
WOFF Пример
Ето няколко примера за WOFF файлове: WOFF страница на HTML5 в 24 часа.
Оригинална статия на Дженифър Кринин. Редактиран от Джереми Жиар на 7.11.17