Web前端开发-Web前端工程师

@font-face

语法:

@font-face{font-family:name;src:<url>;sRules;}

取值:

<name>:
字体名称
<url>
使用绝对或相对地址指定OpenType字体
<sRules>:
样式表定义

说明:

设置嵌入HTML文档的字体。
  • 通常使用.ttf(TrueType)和.otf(OpenType)两种字体格式。
  • 嵌入HTML文档的字体是指将OpenType字体(压缩的TrueType字体)文件映射到客户端系统,用来提供HTML文档使用该字体,或取代客户端系统已有的同名字体。即让客户端显示客户端所没有安装的字体。
  • 微软的IE5已经是开始支持这个属性,但是只支持微软自有的.eot(Embedded Open Type)格式,而其他浏览器直到现在都没有支持这一字体格式。Safari从3.1开始已经可以设置.ttf(TrueType)和.otf(OpenType)两种字体做为自定义字体了。

兼容性:

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 IE Firefox Safari Chrome Opera
版本 6-8 #1 4 5.1.7 13 11.5
版本 9-10 #2
  1. IE8及更早浏览器只支持微软自有的.eot(Embedded Open Type)格式。
  2. IE9-10部分支持ttf和otf字体格式。

示例: