/ @font-face

@font-face 二三事

@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
}

相关资源

同源策略

IE 和 Firefox 对 Web font 应用同源策略跨域调用时需要设置相应的 HTTP 响应头,否则浏览器不会载入其他域中的字体。下面是 Apache 中设置访问控制 HTTP 的例子,* 号可以改为特定的 URL。
Header set Access-Control-Allow-Origin "*"
参考链接

另类使用 - icon font

在 @font-face 被引入 CSS3 之前,Scalable Inman Flash Replacement (sIFR)、cufon  是实现网页自定义字体的流行方案,但仅限于小型站点,无法在工业环境中大规模使用。对英文字体而言,@font-face 可以大范围在生产环境中使用,因为英文字体就那么有限的字符,字体的体积不大;对中文字体而言,@font-face 似乎没有什么用武之地,动辄几 M 甚至十几二十 M 的中文字体,就目前的网络环境并不现实。

不过,一种另类的使用——icon font,倒是可以应用。更多信息请参考一下链接: