CSS 中的自定义字体模块 @font-face

针对WEB页面开发过程中的自定义字体需求，会用到CSS中的@font-face模块。下面是@font-face的语法规则。

 @font-face {
     font-family: <YourWebFontName>;
     src: <source> [<format>][,<source> [<format>]]*;
     [font-weight: <weight>];
     [font-style: <style>];
 }

 

其中方括号内的属性是可选属性，<format>属性有多个取值，用来描述此引用字体的格式，帮助浏览器识别（浏览器兼容性问题），其取值有以下几种：

 

 

 1. TureType | .ttf 

 Windows和Mac中最常见的字体格式，它是用一种RAW格式（未经处理），所以未针对浏览器优化。

 

 

 2. OpenType | .otf 

 被认为是一种原始的字体格式，其内置在TureType的基础上，所以也提供了更多的功能。

 

 

 3. Web Open Font Format | .woff 

 Web字体中最佳格式，开放的TrueType/OpenType的压缩版本，支持元数据包分离。

 

 

 4. Embedded Open Type | .eot 

 IE专用字体，可以从TrueType创建此格式字体。

 

 

 5. SVG | .svg 

 基于SVG字体渲染的一种格式。

 

 

 

兼容的写法如下：

@font-face {
    font-family: 'MircoYaHei';
    src: url('MircoYaHei.eot'); /* IE9 Compat Modes */
    src: url('MircoYaHei.eot?#iefix) format('embedded-opentype'), /* IE6-IE8 */
        url('MircoYaHei.woff) format('woff'), /* Modern Browsers */    
        url('MircoYaHei.ttf) format('truetype'), /* Safari, Android, iOS */
        url('MircoYaHei.svg#MircoYaHei) format('svg'), /* Legacy iOS */
}