【前端技术】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属性的兼容性：

【前端技术】CSS如何实现读取服务器字体-兼容性配图-逐风的技术之路

手册中的示例代码：

<!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、""、0值和 下一条:【CSS入门】CSS的基础语法

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

相关文章

最新文章