CSS如何实现读取服务器字体

2020-02-10 17:33:25

字体：大中小

来源：转载

供稿：网友

【前端技术】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>