Всеки дизайнер е наясно с ограничения набор от шрифтове, достъпни в уеб. Проблемът проистича от факта, че за да изобрази браузъра даден шрифт, той трабва да е инсталиран на компютъра на потребителя. И за да ни е по-интересно, различните платформи идват с различен набор от шрифтове. Е, вече няма да е така, с излизането на Firefox 3.5 и версия 10 на Опера преди това всички основни браузъри вече поддържат декларацията @font-face от CSS.
Конструкцията @font-face позволява да укажете името на шрифта, файла, който да се използва за изобразяването му, както и характеристиките му.
@font-face { font-family: "Tagesschrift"; src: url("fonts/YanoneTagesschrift.ttf"); font-weight:normal; } h1 { font-family: Tagesschrift,serif; }
Горното ще изобрази основното заглавие в страницата със шрифта Tagesschrift, описан във файла YanoneTagesschrift.ttf. И това работи във Сафари 3.2, Frefox 3.5, Опера 10. Ами IE? Е, както винаги от Microsoft са на собствено мнение по въпроса и поддържат шрифтове в свой собствен формат, който наричат Embeddable Open Type. За да конвертирате шрифтовете в този формат, ще ви трябва инструмента WEFT, който не е точно удобен за работа, но пък няма алтернатива (търсих!). Този инструмент ще генерира за вас шрифтовете и съответните CSS декларации, които естествено ще трябва да поставите във CSS файл, който да зареждате със условен коментар. Ако ползвате последна версия на съвременен браузър, ето и примерна страничка с два шрифта, които най-вероятно нямате. В заглавната част на този блог също ползвам шрифт, зареден с @font-face, като съм си направил труда да направя и EOT вариант за тези, които по една или друга причина още ползват IE.
Конструкцията @font-face позволява освен пътя до шрифта да опишете и повечето му характеристики – дебелината (font-weight как се казва на български?), дали е курсив и т.н. Освен това имате възможност да зададете различни имена, под които браузъра да го потърси на потребителската машина, преди да се опита да го изтегли:
@font-face { font-family: MyHelvetica; src: local("Helvetica Neue"), local("HelveticaNeue"), url(MgOpenModernaRegular.ttf); } body { font-family: MyHelvetica, sans-serif; }
Примерът е от статията Beautiful fonts with @font-face. В нея можете да намерите и други съвети относно използването на тази конструкция.
За съжаление завръщането на @font-face в спецификацията и поддръжката от основните браузъри не решава напълно проблема с използването на различни шрифтове в уеб. В момента, в който решите да качите любимия си шрифт на вашия сървър, вие ще се превърнете в пират, ограбващ интелектуалната собственост на създателите му. Въпросът за евентуалното неограничено копиране на файловете се явява сериозна пречка пред приемането на OpenType като основен формат в CSS3 стандарта. Повече по въпроса смятам да напиша в следваща публикация, а до тогава ето статии, третиращи типографията в уеб:
- Най-разпространените шрифтове под Windows, MacOS и Linux – optimiced.com
- Още за шрифтовете на Win/Mac – optimiced.com
- CSS3 – поддръжка на @font-face | Ангел Джорапов
- Linux Font Equivalents to Popular Web Typefaces – Monday By Noon
- Whatever happened to font-stretch? | Clagnut
- Font-weight is still broken in all but one browser | Clagnut
- @font-face in IE: Making Web Fonts Work — Jon Tan 陳
- 8 Definitive Web Font Stacks – SitePoint.com
- CSS @ Ten: The Next Big Thing – A List Apart
- Beautiful Fonts With @font-face – hacks.mozilla.org
Етикети: @font-face, CSS, CSS3, font embedding, font linking, типография, шрифтове
Ето един инструмент за конвертиране от TTF към EOT – http://code.google.com/p/ttf2eot/ .
Не съм го пробвал, но щом google са му предоставили хостинг, мисля, че ще върши работа :) .
Явно не съм търсил правилно… Благодаря, Ангеле, вече го дръпнах, компилира се без проблем и работи, остава да тествам резултата.
А проектът е в GoogleCode, просто защото създателят на програмчето е харесал услугата. GoogleCode e просто още една услуга за хостване на проекти с отворен код и проектите там не са по никакъв начин гарантирани от Гугъл.
[…] като всички вече знаят как да използват любимия си шрифт в своя проект за уеб […]