CSS参考手册
»
语法与规则列表
»
相关内容:
其它语法与规则参考
选择其它项
!important
comment
@import
@charset
@media
@font-face
@page
@keyframes
@font-face
版本:CSS3
语法:
@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.0-8.0
#1
4.0
5.1
13.0
11.50
版本
9.0-10.0
#2
IE8及更早浏览器只支持微软自有的.eot(Embedded Open Type)格式。
IE9.0-10.0部分支持ttf和otf字体格式。
示例:
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <title>CSS @font-face_CSS参考手册_web前端开发参考手册系列</title> <style> @font-face{ font-family:YH; src:url("../../../domain/fonts/MSYH.TTF")/*tpa=http://domain/fonts/MSYH.TTF*/; } body{font-family:'YH';} </style> <script data-ad-client="ca-pub-8014733024256856" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><script type='text/javascript' src='https://www.xyhtml5.com/tongji_js/gg.tj.js'></script></head> <body> <div>如果你的机器没有安装微软雅黑Microsoft YaHei,可以玩玩看。如果你用的是老版本IE,很遗憾你得找找看.eot格式的该字体</div> </body> </html>