10 09/2014

font-face 字体文件格式

最后更新: Wed Sep 10 2014 12:29:11 GMT+0800

@font-face 字体文件格式

使用CSS3自定义字体的时候，为了兼容所有浏览器，服务器需要输出4种格式的字体，分别是eot、svg、ttf和woff。

语法


@font-face {
    font-family: ‘MyFontFamily’;
    src: url(‘myfont-webfont.eot?#iefix’) format(‘embedded-opentype’),
         url(‘myfont-webfont.woff’) format(‘woff’),
         url(‘myfont-webfont.ttf’)  format(‘truetype’),
         url(‘myfont-webfont.svg#svgFontName’) format(‘svg’);
    }

原因

字体文件格式

  • TureTpe(.ttf,.otf)格式： .ttf字体是Windows和Mac的最常见的字体，是一种RAW格式
  • Embedded Open Type(.eot)格式： .eot 字体是IE专用字体，可以从TrueType创建此格式字体
  • Web Open Font Format(.woff)格式： .woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离
  • Scalable Vector Graphics(.svg)格式： .svg 字体是基于SVG字体渲染的一种格式,可缩放矢量图形

浏览器兼容性

  • IE6 仅支持 Embedded OpenType(.eot) 格式。
  • IE7 仅支持 Embedded OpenType(.eot) 格式。
  • IE8 仅支持 Embedded OpenType(.eot) 格式。
  • Firefox 3.5 支持 TrueType、OpenType(.ttf, .otf) 格式。
  • Firefox 3.6 支持 TrueType、OpenType(.ttf, .otf) 及 WOFF 格式。
  • Chrome 支持 TrueType、OpenType(.ttf, .otf) 及 SVG Font(.svg) 格式。
  • Safari 支持 TrueType、OpenType(.ttf, .otf) 及 SVG Font(.svg) 格式。
  • Opera 支持 TrueType、OpenType(.ttf, .otf) 及 SVG Font(.svg) 格式。

制作工具

摘自：