@font-face 其实不是什么新鲜技术了。早在 IE5 就实现了 CSS 字体导入，当时微软的实现方式是一种叫做 Embeddded OpenType（EOT） 的字体格式。CSS3 将 @font-face 纳入规范并进行扩展，说它是新瓶装旧酒也不为过。新技术的普及需要大环境的支持，只能说最早的 @font-face 技术生不逢时。
@font-face 用法
语法和值
@font-face {
[font-family: <family-name>;]?
[src: [ <uri> [format(<string>#)]? | <font-face-name> ]#;]?
[unicode-range: <urange>#;]?
[font-variant: <font-variant>;]?
[font-feature-settings: normal|<feature-tag-value>#;]?
[font-stretch: <font-stretch>;]?
[font-weight: <weight>];
[font-style: <style>];
}
| 属性 | 值 | 说明 |
|---|---|---|
| font-family | 字体名称 | 必须。定义字体名称，以在 CSS 设置字体时使用 |
| src | URL | 必须。 定义字体路径。指定外部字体使用 url(sURL)，sURL 可以是相对 路径也可以是绝对路径。IE8- 只支持指定一个 URL。
引用外部字体时可以指定字体格式 format(fontFormat)，不同的字体格式使用逗号分隔。目前可能的字体格式为 "woff"、"truetype"、"opentype"、
"embedded-opentype"、"svg"。（IE8- 不支持字体格式，将被忽略）。
指定本地引用时 local(sFontName)， sFontName 为要使用的本地安装的字体名。 |
| font-stretch | normal | 可选。定义字体伸缩方式，默认为 "normal"。 |
| font-style | normal italic oblique | 可选，默认为 "normal" |
| font-weight | normal bold 100-900 | 可选，默认为 "normal" |
| unicode-range | unicode-range | 可选，定义字体支持的 UNICODE 范围，默认为 "U+0-10FFFF"。 |
字体格式
- Embedded OpenType （EOT）[IE5-8]
- TrueType（TTF） [IE9+、FF3.5+、C4+、S4+]
- OpenType（OTF） [IE9+、FF3.5+、C4+、S4+、O10.5+]
- SVG - [iOS]
- Web Open Font（woff） [IE9+、F3.6+]
使用示例
@font-face {
font-family: 'Octicons Regular';
src: url("octicons-regular-webfont.eot");
src: local("Octicons Regular"),
url("octicons-regular-webfont.eot#iefix") format("embedded-opentype"),
url("octicons-regular-webfont.woff") format("woff"),
url("octicons-regular-webfont.ttf") format("truetype"),
url("octicons-regular-webfont.svg#newFontRegular") format("svg");
font-weight: normal;
font-style: normal
}
相关资源
- Font Squirrel - 提供各种格式的英文字体下载 | Webfont Generator - 字体格式在线转换
- Typekit - 商业字体
- Google Fonts - 英文开源字体 CDN，不过只提供 woff 格式
- fonts.com Web Fonts，由 Monotype Imaging 提供
- FontsLive，由 Ascender/Monotype 提供
- Web FontFonts，由 FontShop 提供
- Typotheque Webfont Service，由 Typotheque 提供
- webfonts.info 具有一个广泛的 Web 字体源列表—不需要任何开销、授权费用即可订阅
- Fonts available for @font-face embedding
同源策略
IE 和 Firefox 对 Web font 应用同源策略，跨域调用时需要设置相应的 HTTP 响应头，否则浏览器不会载入其他域中的字体。下面是 Apache 中设置访问控制 HTTP 的例子，* 号可以改为特定的 URL。Header set Access-Control-Allow-Origin "*"参考链接
- 如何使用 CSS3 增强网站的类型设计 - MSDN
- @font-face - MDN
- @font-face 实战
- Fixing Firefox font-face Cross Domain Problem
另类使用 - icon font
在 @font-face 被引入 CSS3 之前，Scalable Inman Flash Replacement （sIFR）、cufon 是实现网页自定义字体的流行方案，但仅限于小型站点，无法在工业环境中大规模使用。对英文字体而言，@font-face 可以大范围在生产环境中使用，因为英文字体就那么有限的字符，字体的体积不大；对中文字体而言，@font-face 似乎没有什么用武之地，动辄几 M 甚至十几二十 M 的中文字体，就目前的网络环境并不现实。不过，一种另类的使用——icon font，倒是可以应用。更多信息请参考一下链接：
