CSS中使用@font-face定义字体相关知识点

我们可以使用@font-face在CSS文件中定义自定义的字体文件

<a target="_blank" href="https://www.xuemy.cn/archives/tag/font-face" title="View all posts in @font-face">@font-face</a> {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}

其中，有以下的知识点：

@font-face定义位置

@font-face只能单独书写，不能包含在选择器样式的内部，例如下面的写法是错误的：

.className {
  @font-face {
    font-family: MyHelvetica;
    src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"),
        url(MgOpenModernaBold.ttf);
    font-weight: bold;
  }
}

@font-face中相关属性

@font-face中的font-family表示字体名称，可以自定义

url属性：自定义字体在当前服务器的位置(可填相对路径和绝对路径)
format属性：字体的格式 主要用于浏览器识别
通常有以下几种：truetype opentype truetype-aat embedded-opentype avg等

TrueType格式(.ttf)
Windows和Mac上常见的字体格式 这是一种原始格式 因此并没有为网页进行优化处理
浏览器支持：IE9+,FireFox3.5+,Chrome4.0+,Safari3+,Opera10+,IOS Mobile Safari4.2+

OpenType格式(.otf)
以TrueType为基础 也是一种原始格式 但提供了更多的功能
浏览器支持：FireFox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,IOS Mobile Safari4.2+

Web Open Font格式(.woff)
针对网页进行特殊优化 因此是Web字体中的最佳格式
它是一个开放的TrueType/OpenType的压缩版 同时支持元数据包的分离
浏览器支持：IE9+, FireFox3.5+, Chrome6+, Safari3.6+,Opera11.1+

Embedded Open Type格式(.eot)
IE专用字体格式 可以从TrueType格式创建此格式字体
浏览器支持：IE4+

SVG格式(.svg)
基于SVG字体渲染的格式
浏览器支持：Chrome4+, Safari3.1+, Opera10.0+, IOS Mobile Safari3.2+

@font-face的local()和url()用法

在同时使用 url() 和 local() 功能时，为了用户已经安装的字体副本在需要使用时被使用，如果在用户本地没有找到字体副本就会去使用户下载的副本查找字体。

在接下来的例子中，用到了用户本地字体”Helvetica Neue Bold”的备份；如果当前用户 (浏览器) 未安装该字体 (两种可能的字体名都已经试过)，就会用下载的字体”MgOpenModernaBold.ttf”来代替：

@font-face {
  font-family: MyHelvetica;
  src: local("Helvetica Neue Bold"),
  local("HelveticaNeue-Bold"),
  url(MgOpenModernaBold.ttf);
  font-weight: bold;
}

@font-face注意事项

• 这里使用的 Web fonts 仍然受到同域限制 (字体文件必须和调用它的网页同一域), 但可以使用 HTTP access controls (en-US) 解除这一限制。
• 因为这里没有为 TrueType(ttf), OpenType(otf) 和 Web Open File Format(WOFF) 字体定义 MIME，因此不能为这些字体类型设置特定的 MIME（实际上 WOFF 的 MIME 将会是 application/font-woff，但浏览器对此 MIME 的识别还不统一，其他字体情况也类似，可暂时使用 application/octet-stream）。
• 你不能在一个 CSS 选择器中定义 @font-face。