这个CSS字体系列如何正确显示“Economica”?

前端之家收集整理的这篇文章主要介绍了这个CSS字体系列如何正确显示“Economica”?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
在此页面上:正文中的 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>加载标签,您可以在页面头部找到:

<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.

原文链接:https://www.f2er.com/css/242126.html

猜你在找的CSS相关文章