Zen*_*hat 6 css fonts css3 font-face
在这个页面上:正文中的http://www.anasiamusic.com/bio.html("Ana Sia的DJ箱子是一个自动收报机......"),其font-family属性<div>指定为:
font-family: 'Economica', sans-serif
我想知道它是如何工作的 - 即使在Internet Explorer中,在IE7查看模式下,它仍然按预期显示.我一直坚持使用像Georgia,Verdana和其他人一样的网页安全字体进行正文复制,我一直认为要完成这样的事情并使其跨平台兼容,我必须使用@font-face.
显然我错了,有人可以解释一下,或许可以指出一些可能进一步阐明的网络排版的好资源吗？
请注意,我的计算机上没有安装Economica(Windows 7).
Economica由Google Web Fonts提供(链接到字体标本).
它是通过此<link>标记加载的,您可以在页面头部找到它:
<link href='http://fonts.googleapis.com/css?family=Economica:700' rel='stylesheet' type='text/css'>
然后由支持@font-faceCSS规则的浏览器嵌入,以便它们可以在页面内呈现它.您可以@font-face在CSS3规范中阅读更多相关信息.
Google Web Fonts使用该规则以及适当的格式来告诉浏览器嵌入字体.浏览器然后下载字体并尝试渲染它,如果它是他们理解的格式,否则它们将回落到堆栈中的下一个(在这种情况下,通用族sans-serif).这就是它的全部,真的.
最终下载的字体格式依赖于浏览器:现代浏览器只需要下载WOFF格式,而像IE7这样的旧浏览器会收到一种称为EOT的不同格式(自IE4以来支持!)以便嵌入字体.其他浏览器的早期版本可能会选择其他格式,如TTF,OTF甚至SVG.您可以在有关防弹@font-face语法的文章中阅读有关各种格式及其用途的更多信息,例如本文.