针对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 */
}