没有合适的资源?快使用搜索试试~ 我知道了~
CSS3 + @font-face 在网页中嵌入自定义Web字体
需积分: 50 10 下载量 195 浏览量
2017-09-07
23:05:32
上传
评论 1
收藏 1.92MB PDF 举报
温馨提示
试读
12页
在CSS3所有时髦的新功能中,很难说哪个最好。但是,假如非要找出 那么一个功能,一个现在就能用,而且能够令人浮想联翩的功能,我想 就要数Web字体了。
资源推荐
资源详情
资源评论
CSS3 + @font-face 在网页中嵌入自定义Web字体
在CSS3所有时髦的新功能中,很难说哪个最好。但是,假如非要找出
那么一个功能,一个现在就能用,而且能够令人浮想联翩的功能,我想
就要数Web字体了。
以前,Web设计人员只能使用少数几种安全字体。所谓安全字体,就是
已知的所有浏览器和操作系统都支持的字体。然而,任何一位有点经验
的设计师都知道,字体在营造文档氛围的过程中,具有不可替代的重要
作用。选择一款合适的字体,原本冷冰冰的学术说教,瞬间就会让人暇
思无限,而从古典守旧到未来主义同样也只有一步之遥。
注意 为什么浏览器不急于实现自定义Web字体?首先,有一个优化
的问题。由于计算机显示器的分辨率远远赶不上印刷的精度,所以如
果Web字体设置不当,显示器在显示小号字体时就会模糊一团。其
次,大多数字体并非免费。微软等大公司显然不愿意鼓励Web开发人
员在未经允许的情况下,就把自己电脑里的字体上传到网站上,这可
以理解。下一节我们马上会介绍到,字体公司对这两个问题都给出了
解决方案。
CSS3通过@font-face为浏览器增加了强大的字体功能。使用这个功能
的步骤如下:
1. 把字体上传到网站(或者为了支持不同的浏览器,上传该字体的多
个不同版本);
2. 使用@font-face命令注册每一个想要在样式表中使用的字体;
3. 在样式表中使用注册过的字体,就像使用Web安全字体一样使用字
体名字;
4. 浏览器在遇到使用Web字体的样式表时,就会把字体下载到页面和
图片的临时缓存中。然后就在你的网页或网站中使用该字体(如图
1所示)。如果其他网页也要使用相同的字体,则需要分别注册
并提供自己的字体文件。
1
图1:此示例页面使用了4种新字体。这些字体都是免费的,第1.2节将
介绍怎么从Font Squirrel取得这些字体,进而介绍如何从方拓字体获
得绚丽多彩的在线中文字体。
注意 严格来讲,@font-face不是新功能。CSS 2当时就定义了这个
命令,但由于浏览器开发商意见不统一,CSS 2.1又把它给删除了。
现在,CSS3又开始致力于把@font-face打造成一个普适的标准。
接下来几小节分别讨论上述几个步骤。
1.1 Web字体格式
尽管目前所有浏览器都支持@font-face,但它们支持的字体文件格式
却不一样。Internet Explorer已经支持@font-face很多年了,但它只支
持一种字体文件格式EOT(Embedded OpenType)。这种格式有很多长
处,比如它支持通过压缩减少字体文件大小,也支持严格的网站许可,
2
从而不会被其他网站盗用。可是,.eot格式一直没有发展起来,除了IE
之外,其他浏览器都不支持它。直至最近,其他浏览器都还是支持桌面
应用中常见的字体格式,即TTF(TrueType)和OTF(OpenType
PostScript)。而除了上述几种格式外,还有另外两种字体格式:SVG
和WOFF。表1列出了所有这些字体格式。
表1 嵌入字体格式
格 式 说 明 浏 览 器
TTF(TureType)、
OTF(OpenType
PostScript)
桌面应用中常用的字体格式
Firefox(3.6版之前)、
Chrome(6版之前)、
Safari和Opera
EOT(Embedded
OpenType)
微软特有的格式,除了IE没有别的浏
览器支持
Internet Explorer(IE9之
前)
SVG(Scalable Vector
Graphics)
一种用于字体的多功能图形格式,效
果并不是太好(显示速度慢,而且文
本质量不高)
Safari Mobile(iOS 4.2之前
版本的iPhone和iPad)和使
用Android操作系统的移动
设备
WOFF(Web Open Font
Format)
可能是唯一一个面向未来的字体格
式。比较新的浏览器支持它
IE9、Firefox 3.6和Chrome
6及更高版本支持它
记住:要想让所有浏览器都支持你的字体,必须将同一字体制作成多种
格式。最低限度,也要把字体制作成TTF或OTF格式(具体哪种格式无
所谓)、EOT格式和SVG格式。当然,最好也(但不是必须)支持
WOFF格式,因为这种格式将来很可能得到广泛支持。(WOFF格式也
支持压缩,因此可以缩短下载时间。)
消除异常
即使你规规矩矩地提供了必要的字体格式,仍然免不了会遭遇一些异
常情况。下面给出了在使用Web字体时偶尔会出现的问题。
很多字体在依然有很多用户的Windows XP中看起来并不舒服,
因为Windows XP通常会禁用反锯齿功能。(没有打开反锯齿功
能时的字体看起来像是“乍毛鸡”。)
有人反映某些浏览器(或操作系统)在显示某些嵌入字体时有问
题。
3
剩余11页未读,继续阅读
资源评论
mcxxlm
- 粉丝: 0
- 资源: 6
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功