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

@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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值