聊一聊“@font-face”

在@font-face处理兼容中出现了一个#iefix这个东东?到底是神马东西呢?

案例:

首先先了解关于@font-face的基本知识

1、@font-face 与 EOT 格式

之所以把它们放到一起是因为首个实现 @font-face 和 EOT 的是同一家公司 - 微软。早在九十年代 CSS 就有了自定义字体的语法,IE4是首个实现此语法的浏览器,没错,就是IE。不过,字体格式只能是微软自己开发的 EOT(Embedded Open Type) 格式。EOT 允许字体的作者保护字体不被非法复制,微软不允许其他浏览器厂商使用该格式,因此它只能在 IE 下使用。

这对当时来说太超前了。还记得在 windows XP 下看使用了『微软雅黑』的网页吗?当时的系统用一种简单的灰阶反锯齿技术,对于系统的字体这足够了,但对于其他字体,由于缺少人工的优化,字体会变得很虚。因此,本来想改进网页的排版效果,结果却使文字都无法阅读。

于是,CSS2.1 中彻底去掉了 @font-face 语法也不足为奇了。

2、Safari 的一小步,浏览器的一大步

大约十年后,在2008年,Safari 3.1 重新支持了 @font-face , 并且可以使用最普遍的字体格式 ttf 以及 otf。其实这得益于液晶显示器(LCD)的普及,LCD 提供了更高的分辨率以及通过亚像素渲染(subpixel rending)的反锯齿(anti-aliasing)技术。这样,即使字体很小,也能看得很清楚。

微软称这种技术为 ClearType。在 Mac OS X 平台上 subpixel rending 是默认开启的,但在 windows 平台上只有 windows vista 以及之后的版本才会默认开启。因此回到上面的问题,由于『微软雅黑』不是 XP 的系统字体,XP 默认没有开启 ClearType,因此当在装有『微软雅黑』字体的 XP 上访问将字体设为『微软雅黑』的网页时,看起来会很模糊。不过,手动开启 ClearType 后便可以解决此问题。

一年后,Firefox Opera Chrome 等主流浏览器都开始支持 @font-face。

又过了一年,2010年,几乎所有主流浏览器都支持了 @font-face , 甚至是 IE,从 IE9 开始微软摒弃了自己的 EOT 字体开始支持 ttf otf 等主流字体格式。在移动端,iOS 从4.2开始也支持这些字体格式。

自此,@font-face 死而复生。 web字体时代来临。

3、truetype woff 以及 svg

上面 CSS 声明中使用了 4 种字体格式,其中 EOT 格式前面已经提过,它是 IE 的专有格式,下面看一下余下的 3 种格式。

先说 svg 格式,iOS 在 4.2 之前仅支持 svg 格式的字体,由于 svg 格式不能压缩,通常会比较大。鉴于 iOS 老版本渐渐被淘汰,因此可以考虑去掉此格式。

truetype(.ttf) 是目前最普遍的字体格式,早在八十年代就被苹果开发出来,当时它作为一种可伸缩的字体格式用来代替位图字体在屏幕上显示,不久微软也接受了这个格式,由于该格式可以针对特定大小做精准的微调,渐渐地成为系统字体的标准。

说到 truetype 不得不提一下 opentype,它在 CSS 中的出镜率也很高。opentype 可以看作是 truetype 的升级版,由微软和 Adobe 联合开发。opentype 采用不同于 truetype 的算法存储路径,单从这点来讲 opentype 有两个主要优势:1.平均比 truetype 小 20% 到 50%。2.需要较少的用于反锯齿的微调信息(详见下面的参考链接)。除此之外,opentype 除基本字符集外还提供了别的扩展,比如小号大写字符,老式的数字,以及其他一些图形。既然 opentype 有这么多优点,那为什么我们上面的代码中没用使用 opentype 呢?首先,微软建议如果只需要在屏幕上显示文字推荐用 truetype 格式。如果需要更大的字符集和更好的打印效果才推荐 opentype 。其次,支持 opentype 的浏览器都支持 truetype。

最后,也是最新出现的是 woff (web open type format)。woff 属于 W3C 的推荐标准。由两名字体设计师和两位 Mozilla 的开发者设计。最早在 firefox 3.6 上实现。事实上,woff 并不是一种新的字体格式,它只是包装 truetype 和 opentype 并进行压缩,压缩后可以使 truetype 减少 40% 。除此之外,它还允许添加元信息,比如字体作者的许可证,不过浏览器并不对这些许可做任何验证。

4、#iefix有何作用?

IE9 之前的版本没有按照标准解析字体声明,当 src 属性包含多个 url 时,它无法正确的解析而返回 404 错误,而其他浏览器会自动采用自己适用的 url。因此把仅 IE9 之前支持的 EOT 格式放在第一位,然后在 url 后加上 ?,这样 IE9 之前的版本会把问号之后的内容当作 url 的参数。至于 #iefix 的作用,一是起到了注释的作用,二是可以将 url 参数变为锚点,减少发送给服务器的字符。

5、为何有两个src?

绝大多数情况下,第一个 src 是可以去掉的,除非需要支持 IE9 下的兼容模式。在 IE9 中可以使用 IE7 和 IE8 的模式渲染页面,微软修改了在兼容模式下的 CSS 解析器,导致使用 ? 的方案失效。由于 CSS 解释器是从下往上解析的,所以在上面添加一个不带问号的 src 属性便可以解决此问题。

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2016-08-05

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏不止是前端

Vue:基于Vue2的饿了么实战总结

3597
来自专栏程序员的知识天地

一个Mac系统,能让程序员编程效率提升30%

Mac 系统一向以提供高效的工作环境著称,iOS、Android和服务端程序员都可以轻松的在Mac上搭建舒适的开发环境。

1762
来自专栏数据小魔方

Xcelsius(水晶易表)系列15——动态交互地图的案例

今天接着上一篇继续跟大家分享关于水晶易表动态交互地图的案例操作。 之前曾说过,数据地图作为一种特殊的统计图,在水晶易表中具有与其他普通统计图一样的钻取、动态可见...

3438
来自专栏Nian糕的私人厨房

Vue2.0 数据抓取及Swiper组件开发

本次的系列博文的知识点讲解和代码,主要是来自于 黄轶 在慕课网的 Vue 2.0 高级实战-开发移动端音乐WebApp 课程,由个人总结并编写,其代码及知识点...

994
来自专栏Coding迪斯尼

寿司快卖,创建一个运行在电脑,手机及Pad上的多屏游戏

本节开始,我们将设计一个养成类游戏。游戏主题是创建一家寿司店,你是主厨,当客户点餐后,你根据菜单配置寿司。我们会先把游戏设计成页面游戏,然后通过不断的调试,将游...

932
来自专栏拂晓风起

HTML5骨骼动画Demo | 使用min2d、createjs、pixi播放spine动画

4285
来自专栏无原型不设计

UI设计规范:单选按钮 vs 复选框,没那么简单

无论是网页设计,还是移动app设计,都经常用到单选按钮和复选框这两个组件。这两个组件看似意义明确,很好区分,但在实际设计中却很容易用错,带来不好的用户体验。 ...

2783
来自专栏皮振伟的专栏

[qemu][vnc]虚拟化平台上远程连接遇到的几个问题分析

前言: 虚拟化平台上,不管是调试,还是实际使用,都离不开远程连接。在使用vnc、spice的时候,遇到过一些问题。 分析: 1,frame buffer 先说...

9157
来自专栏岑志军的专栏

(1)越狱环境搭建

1524
来自专栏MixLab科技+设计实验室

App之底部导航栏的设计

hi,这是系列文章:App之xxx的第2篇,第1篇我总结了App之“文字”的设计技巧。今天来总结下app的底部导航栏的设计。 我为什么写这个系列的文章。因为我正...

33511

扫码关注云+社区