首页 > 代码库 > [转] 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的兼容和使用