2010 2010年 03月 13日
@ fontface:表示它与您选择的字体,使用WebFonts
今年的CSS完成10年内存在! 那些已经出现了一段时间,赢得他们的面包(或不)使用CSS,那么您可能已经知道我们如何挨饿的字体很好的选择。 即使像那些缺少的字体设计师CSS禅意花园已使用CSS背景图片,字体,以取代他们的设计做一些正义的追求。 我们也尝试过的闪存/ JavaScript®黑客来实现我们的设计目标。 这绝不是一种错误的方式来获得,我们希望把我们的网页设计的字体,但肯定的是,它是不是最可取的办法。 多年来网页设计师,像我一样,已经完全依赖于十年或为他们设计的字体。
Web标准和字体格式最近的事态发展使人们有可能比其他同旧的默认字体在字体渲染HTML文本。 进来“fontface”的CSS decleration。
@ fontface provids链接到实际的字体文件,并从网上检索的解决方案。 使用@ fontface,设计者可以使用,无需冻结作为背景图片的文字字体。 实施是非常简单,如下所示,但一切美好的事物有一个反面的一部分,不是所有的浏览器支持一个单一的“ 字体类型 ”。 如果您正计划在网站中使用@ fontface需要跨浏览器支持,那么你将有来源提供各种相同的字体类型。
- TrueType字体 -设计很好看屏幕上的一个格式。 推荐,特别是对Windows浏览器(浏览器)。
- 的OpenType(CFF) -此格式是更好的打印工作,并且不总是看Windows上良好。
- 桥式 -你需要这种格式,如果你想针对Internet Explorer的。 IE浏览器将不使用任何其他格式。 我们的EOT将被视为“精简版”,因为它们既不是压缩,也不域限制。
- SVG的 -这是一个XML格式的一些浏览器支持包括iPhone。
- WOFF -跨浏览器,仅在网站上的字体格式是轻量级(字体数据是zip压缩),可以使用TrueType或PostScript的(CFF)概述编译。 它是目前支持由Firefox 3.6 +。
使用@ fontface
@字体面{ 字体家庭:'CalligraphyFLFRegular“; SRC:URL(CalligraphyFLF.eot“); SRC:当地(“CalligraphyFLF),当地的(”CalligraphyFLF),URL(CalligraphyFLF.woff“)(WOFF')的格式,URL(”CalligraphyFLF.ttf)格式(TrueType字体“),网址(”CalligraphyFLF SVG#CalligraphyFLF)格式(SVG); } @字体面{ 字体家庭:“你的字体”; SRC:URL(“字体/ font_filename.eot”); SRC:本地(“备用名称”),当地(“Alternatename”), URL(“字体/ font_filename.woff”)格式(WOFF) URL(“字体/ font_filename.otf”)的格式(“的OpenType”), URL(“字体/ font_filename.svg的#font_filename”)的格式(“SVG”); } H2 {字体家庭:“你的字体”,格鲁吉亚,衬线;}
正如你可以看到从上面的例子,包括选择字体的字样,具有相同的字体,一组fonttypes链接。 因此人们称其为“字体工具包”。
有字体套件,明确允许使用CSS @ font-face的财产,根据最终用户许可协议(EULA)连接。
有用WebFont资源:
- 字体为@ font-face的嵌入页面在维基http://webfonts.info/wiki/index.php?title=Main_Page
- 雷Larabie 。 他是著名的字体设计师,谁取得了数以百计的有趣的自由在网络上使用TrueType字体。 他的字体是典雅,装饰,俏皮。
- 迪特尔·Steffmann是另一个伟大的字体设计师。 他也作出了许多可供任何人使用漂亮字体。
- 字体店 :提供专门设计的网络使用的字体。 超过30最成功FontFont家族现在Web FontFonts可用。 FontShop也有一个详细的WebFont用户指南http://www.fontshop.com/blog/newsletters/pdf/webfontfontuserguide.pdf的
- 字体松鼠 :展示,使用@ font-face的CSS嵌入字体松鼠提供的所有字体。 字体松鼠提供了数量可观的类型,使得它的死简单挑一,轻而易举地提供“包” - 你选择的字体,多种格式,包装,使用非常电流@ font-face的语法演示HTML和CSS 。 他们还提供了一种方法, 使自己的@ font-face的包 。 如果您要使用的字体已授权适当(那些与您的计算机是不是一定没事),发电机产生的EOT,SVG,哎! WOFF文件。










































