首页 > 代码库 > [转] css自定义字体font-face的兼容和使用
[转] 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>];}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
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‘;}
[转] css自定义字体font-face的兼容和使用
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。