【前端技术】CSS如何实现读取服务器字体

时间:2017-06-13

【前端技术】CSS如何实现读取服务器字体?

在CSS 3或者CSS 2手册里,都可以找到@font-face这个属性;


@font-face CSS语法

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


@font-face 取值:

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


@font-face 属性说明:

设置嵌入HTML文档的字体。 

通常使用.ttf(TrueType)和.otf(OpenType)两种字体格式。 

嵌入HTML文档的字体是指将OpenType字体(压缩的TrueType字体)文件映射到客户端系统,用来提供HTML文档使用该字体,或取代客户端系统已有的同名字体。即让客户端显示客户端所没有安装的字体。 

微软的IE5已经是开始支持这个属性,但是只支持微软自有的.eot(Embedded Open Type)格式,而其他浏览器直到现在都没有支持这一字体格式。Safari从3.1开始已经可以设置.ttf(TrueType)和.otf(OpenType)两种字体做为自定义字体了。 


据CSS 3手册显示@font-face属性的兼容性:


手册中的示例代码:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>@font-face_CSS参考手册</title>
<style>
@font-face{
	font-family:YH;
	src:url(http://domain/fonts/MSYH.TTF);
}
body{font-family:'YH';}
</style>
</head>
<body>
<div>如果你的机器没有安装微软雅黑Microsoft YaHei,可以玩玩看。如果你用的是老版本IE,很遗憾你得找找看.eot格式的该字体</div>
</body>
</html>
			


上一条:解析Javascript中undefined、null、&quot;&quot;、0值和 下一条:【CSS入门】CSS的基础语法

相关文章

最新文章