HTML页面引入字体@font-face CSS指定字体从远程服务器下载

@font-face

@font-face CSS at-rule 指定一个用于显示文本的自定义字体；字体能从远程服务器或者用户本地安装的字体加载. 如果提供了local()函数，从用户本地查找指定的字体名称，并且找到了一个匹配项, 本地字体就会被使用. 否则, 字体就会使用url()函数下载的资源。

通过允许作者提供他们自己的字体，@font-face 让设计内容成为了一种可能，同时并不会被所谓的"网络-安全"字体所限制(字体如此普遍以至于它们能被广泛的使用). 指定查找和使用本地安装的字体名称可以让字体的自定义化程度超过基本字体，同时在不依赖网络情况下实现此功能。

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

@font-face 规则不仅仅使用在CSS的顶层，还可以用在任何CSS条件组规则中.

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}

Copy to Clipboard

概述

这是一个叫做@font-face 的CSS @规则 ，它允许网页开发者为其网页指定在线字体。 通过这种作者自备字体的方式，@font-face 可以消除对用户电脑字体的依赖。 @font-face 不仅可以放在在CSS的最顶层, 也可以放在 @规则 的 条件规则组 中。

语法

@font-face {
  [ font-family: ; ] ||
  [ src: ; ] ||
  [ unicode-range: ; ] ||
  [ font-variant: ; ] ||
  [ font-feature-settings: ; ] ||
  [ font-variation-settings: ; ] ||
  [ font-stretch: ; ] ||
  [ font-weight: ; ] ||
  [ font-style: ; ] ||
  [ size-adjust: ; ] ||
  [ ascent-override: ; ] ||
  [ descent-override: ; ] ||
  [ line-gap-override: ; ]
}

where
= | +

取值

font-family

所指定的字体名字将会被用于font或font-family属性( i.e. font-family: ; )

src

远程字体文件位置的URL或者用户计算机上的字体名称， 可以使用local语法通过名称指定用户的本地计算机上的字体( i.e. src: local('Arial'); )。 如果找不到该字体，将会尝试其他来源，直到找到它。

font-variant (en-US)

A font-variant value.

font-stretch (en-US)

A font-stretch value.

font-weight (en-US)

A font-weight value.

font-style

对于src所指字体的描述。如果所需字体符合描述，则采用本font-face所定义的字体。

unicode-range (en-US)

在该@font-face中定义的unicode字体范围

示例

下面的例子简单定义了一个可下载的字体，并应用到了文档的整个body标签上。

  
  



GNU Unifont 是 GNU 项目的一部分。 此页面包含最新版本的 GNU Unifont，以及 Unicode 基本多语言平面 (BMP) 中每个可打印代码点的字形。 BMP 占用 Unicode 空间的前 65,536 个代码点，表示为 U+0000..U+FFFF。补充多语言平面 (SMP) 的覆盖范围也在不断扩大，范围为 U+010000..U+01FFFF，以及 Michael Everson 的 ConScript Unicode Registry (CSUR) 和 Rebecca Bettencourt 的 Under-CSUR 补充。

 

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

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

Copy to Clipboard

接下来的例子在英文原文中已被删除。

这个例子新定义了一个字体，正常粗细的字采用字体Times New Roman，粗体字采用Consolas。

@font-face {
    font-family: myFirstFont;
    src: local("Times New Roman");
    font-weight:normal;
}

@font-face {
    font-family: myFirstFont;
    src: local(Consolas);
    font-weight:bold;
}

Copy to Clipboard

注意

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

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

  Copy to Clipboard

规范

Specification	Status	Comment
WOFF File Format 2.0WOFF2 font format	Recommendation	Font format specification with new compression algorithm
WOFF File Format 1.0WOFF font format	Recommendation	Font format specification
CSS Fonts Module Level 3@font-face	Recommendation	Initial definition

浏览器兼容性

Report problems with this compatibility data on GitHub

	desktop						mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet
@font-face	Full support1	Full support12	Full support3.5	Full support4	Full support10	Full support3.1	Full support37	Full support18	Full support4	Full support10.1	Full support2	Full support1.0
SVG fonts DeprecatedNon-standard	No support1 – 38	No supportNo	No supportNo	No supportNo	No support15 – 25	Full support3.1	No support37 – 38	No support18 – 38	No supportNo	No support14 – 25	Full support3	No support1.0 – 3.0
WOFF	Full support6	Full support12	Full support3.5	Full support9	Full support11.1	Full support5.1	Full support4.4	Full support18	Full support4	Full support11.1	Full support5	Full support1.0
WOFF 2	Full support36	Full support14	Full support39	No supportNo	Full support23	Full support10 footnote Open	Full support37	Full support36	Full support39	Full support24	Full support10	Full support3.0
ascent-override	Full support87	Full support87	Full support89	No supportNo	Full support73	No supportNo	Full support87	Full support87	Full support89	Full support62	No supportNo	Full support14.0
descent-override	Full support87	Full support87	Full support89	No supportNo	Full support73	No supportNo	Full support87	Full support87	Full support89	Full support62	No supportNo	Full support14.0
font-display	Full support72	Full support79	Full support58	No supportNo	Full support60	Full support11.1	Full support72	Full support72	Full support58	Full support51	Full support11.3	Full support11.0
font-family	Full support4	Full support12	Full support3.5	Full support6	Full support10	Full support3.1	Full support2.2	Full support18	Full support4	Full support10.1	Full support2	Full support1.0
font-feature-settings	No supportNo	No supportNo	Full support34 footnote Open	No supportNo	No supportNo	No supportNo	No supportNo	No supportNo	Full support34 footnote Open	No supportNo	No supportNo	No supportNo
font-stretch	Full support62	Full support17	Full support62	No supportNo	Full support49	Full support10.1	Full support62	Full support62	Full support62	Full support41	Full support10.3	Full support6.0
font-style	Full support4	Full support12	Full support3.5	Full support4	Full support10	Full support3.1	Full support37	Full support18	Full support4	Full support10.1	Full support2	Full support1.0
font-variant	Full support4	Full support12	Full support3.5	Full support4	Full support10	Full support3.1	Full support37	Full support18	Full support4	Full support10.1	Full support2	Full support1.0
font-variation-settings	Full support62	Full support79	Full support62	No supportNo	Full support49	No supportNo	Full support62	Full support62	Full support62	Full support46	No supportNo	Full support8.0
font-weight	Full support4	Full support12	Full support3.5	Full support4	Full support10	Full support3.1	Full support37	Full support18	Full support4	Full support10.1	Full support2	Full support1.0
line-gap-override	Full support87	Full support87	Full support89	No supportNo	Full support73	No supportNo	Full support87	Full support87	Full support89	Full support62	No supportNo	Full support14.0
size-adjust	Full support92	Full support92	Full support92Open	No supportNo	Full support78	No supportNo	Full support92	Full support92	Full support92	No supportNo	No supportNo	Full support16.0
src	Full support4	Full support12	Full support3.5	Full support6	Full support10	Full support3.1	Full support2.2	Full support18	Full support4	Full support10.1	Full support2	Full support1.0
Support for format keywords	No supportNo	No supportNo	No supportNo	No supportNo	No supportNo	Full support4	No supportNo	No supportNo	No supportNo	No supportNo	Full support5	No supportNo
unicode-range	Full support1	Full support12	Full support36	Full support9	Full support15	Full support3.1	Full support37	Full support18	Full support36	Full support14	Full support3	Full support1.0

Legend

Full support

Full support

No support

No support

Non-standard. Check cross-browser support before using.

Deprecated. Not for use in new websites.

See implementation notes.

User must explicitly enable this feature.

Requires a vendor prefix or different name for use.

参考

• About WOFF
• FontSquirrel @font-face generator
• Beautiful fonts with @font-face
• Open Font Library
• Microsoft Developer Network (MSDN) @font-face reference
• When can I use WOFF?
• When can I use SVG Fonts?