@font-face是CSS3中的一个模块, 能够加载服务器端的字体文件,可以在网页中嵌入客户端没有安装的字体。微软的IE 5已经是开始支持这个属性,但是只支持微软自有的.eot (Embedded Open Type) 格式,而其他浏览器直到现在都没有支持这一字体格式。然而,从Safari 3.1开始,网页重构工程师已经可以设置.ttf(TrueType)和.otf(OpenType)两种字体做为自定义字体了。
语法
@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>];
}
字符串参数 | 字体格式 | 字体默认的扩展名 |
---|---|---|
"truetype" | TrueType | .ttf |
"opentype" | OpenType字体 | .ttf, .otf |
"truetype-aat" | 带有Apple Advanced Typography扩展的TrueType字体 | .ttf |
"embedded-opentype" | 嵌入式OpenType | .eot |
"svg" | SVG字体 | .svg, .svgz |
由于不同浏览器支持的字体格式不一样,为了兼容不同浏览器,定义font-face的时候要引入不同格式的字体,关于字体格式的介绍和字体格式转换可以参考这里
- Internet Explorer 只支持 EOT
- Mozilla Firefox 支持 OTF 和 TTF
- Safari 和 Opera 支持 OTF, TTF 和 SVG
- Chrome 支持 TTF 和 SVG
为了更好的兼容性,一般采用以下写法:
@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
Demo
定义特殊字体Kinescope,需要提前下载好字体文件
@font-face {
font-family: 'KinescopeRegular';
src: url('../font/kinescope-webfont.eot');
src: url('../font/kinescope-webfont.eot?#iefix') format('embedded-opentype'),
url('../font/kinescope-webfont.woff') format('woff'),
url('../font/kinescope-webfont.ttf') format('truetype'),
url('../font/kinescope-webfont.svg#KinescopeRegular') format('svg');
}
为h1使用这种Kinescope字体
h1 { font-family:'KinescopeRegular'; font-size:36px;}
还可以直接使用font-face在线生成工具直接生成这些代码,上传特殊字体文件,然后下载生成的包,里面就有现成的代码了