20 March 2012

Font Awesome: бесплатный свободный (CC BY 3.0) шрифт со значками для употребления в стиле Twitter Bootstrap

Web designWorking with iconsTypography
Всякий такой веборазработчик или дизайнер сайтов, которому когда-либо доводилося ознакомиться со стилевою системою Twitter Bootstrap, уж конечно помнит, что в ней применяются значки Glyphicons (120 штук) для оформления кнопок, и панелей инструментов, и пунктов в списках, и так далее. Распространяются эти значки бесплатно и свободно (по лицензии CC BY 3.0).

У всех этих значков, однако же, есть общий недостаток: они растровые. Соответственно, если в значке есть диагональные или криволинейные элементы, то растянуть такой значок (для крупной кнопки или для сетчаточных дисплеев) не удастся без неприятной потери качества.

Преодолеть этот недостаток намерен проект Font Awesome, нацеленный на разработку бесплатного и свободного (CC BY 3.0) шрифта, содержащего аналогичные значки не в растровой, а в векторной форме. Значки («буквы») этого шрифта легко могут принимать поэтому любой размер и любой цвет. Притом их ужé и не сто двадцать, а сто сорок.

К шрифту прилагаются стилевые файлы, позволяющие начать использование Font Awesome в Twitter Bootstrap без каких-либо особенных усилий.

Напоследок скажу ещё, что при всех его достоинствах у шрифта по сравнению с растром есть и некоторые недостатки (например, невозможность употребления полупрозрачных и полутоновых элементов рисунка, которые используются в некоторых значках Glyphicons), однако недостатки эти в Font Awesome были обойдены сравнительно сносно.

Многое при отображении шрифта будет зависеть даже не от браузера, а от операционной системы; впрочем, это касается любого шрифта, и об этом было немало прежде сказано специалистами (например, в опубликованной 15 октября 2010 года статье «Type rendering: operating systems» во блоге Typekit, снабжённой примерами да скриншотами).

При укрупнении размеров шрифта многие различия рендерингов более или менее скрадываются, и шрифт выглядит эвона как:

[Font Awesome]
Tags:BootstrapGlyphiconsFont AwesomeCC BYрастровая графикавекторная графикашрифты со значкамибесплатный шрифтTypekit
Hubs: Web design Working with icons Typography
+38
23k 209
Comments 42
Top of the last 24 hours