您的位置:首页 > Web前端 > CSS

css自定义字体font-face的兼容和使用

2016-05-04 14:52 811 查看

@Font-face目前浏览器的兼容性:

Webkit/Safari(3.2+)

TrueType/OpenType TT (.ttf) 、OpenType PS (.otf);

Opera (10+)

TrueType/OpenType TT (.ttf) 、 OpenType PS (.otf) 、 SVG (.svg);

Internet Explorer

自ie4开始,支持EOT格式的字体文件;ie9支持WOFF;

Firefox(3.5+)

TrueType/OpenType TT (.ttf)、 OpenType PS (.otf)、 WOFF (since Firefox 3.6)

Google Chrome

TrueType/OpenType TT (.ttf)、OpenType PS (.otf)、WOFF since version 6

由上面可以得出:.eot + .ttf /.otf + svg + woff = 所有浏览器的完美支持

语法

@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-face 在css中具体的 使用方法

/*声明 WebFont*/
@font-face {
font-family: 'pinghei';
src: url('../font/pinghei.eot');
src:
url('../font/pinghei.eot?#iefix') format('embedded-opentype'),
url('../font/pinghei.woff') format('woff'),
url('../font/pinghei.ttf') format('truetype'),
url('../font/pinghei.svg') format('svg');
font-weight: normal;
font-style: normal;
}

/*使用指定字体*/
.test {
font-family: 'pinghei';
}


相关工具介绍

font压缩工具地址:https://github.com/aui/font-spider

gulp 插件: https://github.com/aui/gulp-font-spider

grunt 插件:https://github.com/aui/grunt-font-spider

相关参考资料:

Mozilla
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: