@font-face用法超详细讲解_代码007(未授权)

本文介绍: 参考字体格式有太多选择，不幸的是始终没有一个能在所有的浏览器上通用。这意味着，你。本文内容如题，会依次介绍一下 TTF、OTF、WOFF、EOT 和 SVG 几种字体目前在 We b 上的情况。

fon t–face是css3中允许使用自定义字体的一个模块，他主要是把自己定义的We b 字体嵌入到你的网页中。
这是一个叫做@fon t–face 的CSS @规则 ，它允许网页开发者为其网页指定在线字体。通过这种作者自备字体的方式，@font-face 可以消除对用户电脑客户端的字体的依赖。

@font-face {
  font-family: &lt;font-name&gt;;
  src: local( &lt;family-name&gt; ) | <url&gt; [format("formatName")][,<url&gt; [format("formatName")]]*;
  unicode-range: <unicode-range&gt;;
  font-variant: <font-variant&gt;;
  font-feature-settings: <font-feature-settings>;
  font-variation-settings: <font-variation-settings>;
  font-stretch: <font-stretch>;
  font-weight: <font-weight>;
  font-style: <font-style>;
  font-display: <font-display>;
}

@font-face {
 font-family: 'HYYaKuHei-85J';
 url('./fonts/HYYaKuHei-85J.ttf') format('truetype');
}

.box2 {
 font-family: 'HYYaKuHei-85J';
}

字体格式有太多选择，不幸的是始终没有一个能在所有的浏览器上通用。这意味着，你必须使用多种字体的方案来保持用户跨平台的一致性体验。本文内容如题，会依次介绍一下 TTF、OTF、WOFF、EOT 和 SVG 几种字体目前在 Web 上的情况。

在这里插入图片描述

TTF (TrueType Font) 字体格式是由苹果和微软为 PostScript 而开发的字体格式。在 Mac 和 Windows 操作系统上，TTF 一直是最常见的格式，所有主流浏览器都支持它。然而，IE8 不支持 TTF；且 IE9 上只有被设置成 “installable” 才能支持（译注：别想了，转别的格式吧）。

TTF 允许嵌入最基本的数字版权管理标志————内置标志可以告诉我们字体作者是否允许改字体在 PDF 或者网站等处使用，所以可能会有版权问题。另一个缺点是，TTF 和 OTF 字体是没压缩的，因此他们文件更大。

EOT (Embedded Open Type) 字体是微软设计用来在 Web 上使用的字体。是一个在网页上试图绕过 TTF 和 OTF 版权的方案。你可以使用微软的工具从现有的 TTF/OTF 字体转成 EOT 字体使用，其中对字体进行压缩和裁剪使得文件体积更小。同时为了避免一些收版权保护的字体被随意复制，EOT 还集成了一些特性来阻止复制行为，以及对字体文件进行加密保护。听起来很有前途？嗯哼，可惜 EOT 格式只有 IE 支持。

WOFF (Web Open Font Format) 本质上是 meta data + 基于 SFNT 的字体（如 TTF、OTF 或其他开放字体格式）。该格式完全是为了 Web 而创建，由 Mozilla 基金会、微软和 Opera 软件公司合作推出。 WOFF 字体均经过 WOFF 的编码工具压缩，文件大小一般比 TTF 小 40%，加载速度更快，可以更好的嵌入网页中。meta data 允许在字体文件中包含许可数据，以解决版权问题。这是万维网联盟提（qing）倡（ding）的，所以毫无疑问的是字体格式的未来。目前主流的浏览器的新版本几乎都支持 WOFF。

/* 加载一种字体格式 */
@font-face{
  font-family: "myFontName";
  src:  url('font.woff') format('woff');
}

/* 加载多个字体格式，兼容更多浏览器 */
@font-face{
  font-family: "myFontName";
  src: url('font.eot'); /* IE9*/
  src: url('font.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('font.woff2') format('woff2'),
  url('font.woff') format('woff'), /* chrome、firefox */
  url('font.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url('font.svg#Alibaba-PuHuiTi-Regular') format('svg'); /* iOS 4.1- */
}