醒也罢 梦也罢 人生苦短
用 CSS3 @font-face 嵌入字体
今天刚发现牛人 Mark Pilgrim 正在写的 Dive Into HTML5,对网站上标题的字体很感兴趣,查了一下,是 Essays 1743. 这个字体以 LGPL 协议发布,并没有普及到大部分计算机上,所以需要用到 CSS3 的字体嵌入技术,Cross Browser Font Embedding with the CSS3 @font-face selector 一文详细讲解了跨浏览器的解决办法。 我已经把本站的头部标题改成使用这个字体,如果你没有看到可能是因为缓存的问题,请刷新一下浏览器。(update: 看久了感觉不太舒服,于是已经换掉了). 上面提到的教程其实挺麻烦的,主要是 IE 仅支持 eot 格式字体文件。由于我是复制 Dive Into HTML5 的样式,于是直接从那儿把字体文件下载到我服务器上,再把 CSS 代码搬过来就可以了。 @font-face 定义: @font-face { font-family: "Essays 1743"; src: url("/static/font/essays1743-min.eot"); src: local("Essays 1743"), url("/static/font/essays1743-min.ttf") } 在标题应用该样式: #header-title { font-family: "Essays 1743"; ... } 当然了,嵌入字体的做法对中文来说不大适用,因为一个中文字体文件少说几个到十几个 MB, 用户不能忍受,我们的服务器也不一定能够忍受。所以对中文来说,如果只是想标题使用特殊字体,最好做成图片。而这个英文字体文件只有 30 多 KB,和一张图片的大小差不多,如果有大量的文字需要使用该字体,存储、带宽这方面就划算得多了。