[转] 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'; }

转载于:https://www.cnblogs.com/chris-oil/p/6790806.html