От Mozilla публикуваха информация, че стартират поддръжката на @font-face правилото, от версия 3.1 на браузъра. Това ще позволи на разработчиците да използват шрифтове без да се притесняват от това дали ги има на машината на посетителя. В момента за уеб се използват няколко шрифта (tahoma, verdana, arial и т.н.), които са включени в основните операционни системи.
Благодарение на @font-face, браузърът ще може да показва елементите със шрифтове, които са качени/инсталирани на друг хост, а не на PC-то на посетителя и така уеб дизайнерите ще се сдобият с още един инструмент за създаване на въздействащ и атрактивен дизайн.
Ето един пример как се използва това правило:
@font-face {
font-family: ‘MyFont’;
src: url(http://www.domain.com/fonts/newfont.otf) format(„opentype“);
}div {
font-family:MyFont, Verdana, Arial, Helvetica, sans-serif;
}
Всъщност @font-face е включено и в CSS2 препоръките, но до момента поддръжката му не е включена в никой браузър, с изключение на IE от версия 4 и нагоре, но както може да се очаква там поддръжката е частична и недостатъчна. Към момента единствено със Safari 3.1 може да се види как работи това правило. А ето и информация за поддръжката сред по-масовите браузъри:
@font-face поддръжка
източник: Webfonts.info
Webkit/Safari
- от версия 3.1
- font formats:
- TrueType/OpenType TT (.ttf)
- OpenType PS (.otf)
- допълнителна информация: http://webkit.org/blog/124/downloadable-fonts/ ; Caveats
Opera
- в процес на разработка
- font formats:
- TrueType/OpenType TT (.ttf)
- OpenType PS (.otf)
Internet Explorer
- от версия IE 4 – частична поддръжка
- font formats:
- TrueType converted to Embedded OpenType (.eot) using WEFT
- Допълнителна информация: http://www.microsoft.com/typography/web/embedding/default.aspx
Mozilla/Firefox
- не поддържа @font-face / планирана поддръжка за Firefox 3.1: https://bugzilla.mozilla.org/show_bug.cgi?id=70132
Google Chrome
- не се поддържа в настоящата Beta версия
Netscape
- от версия 4, спряна поддръжка от Netscape Navigator 6
- font formats:
- Portable Font Resource (.pfr)
- допълнителна информация: http://en.wikipedia.org/wiki/TrueDoc
Още по темата:
http://www.webfonts.info/wiki/index.php?title=Main_Page
http://www.css3.info
http://opentype.info/demo/webfontdemo.html – демонстрация на @font-face (за момента може да видите ефекта от използването на правилото само ако имате Apple Safari версия 3.1 или по-нова).