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