admin管理员组

文章数量:1594755

@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: <family-name>; ] ||
  [ src: <src>; ] ||
  [ unicode-range: <unicode-range>; ] ||
  [ font-variant: <font-variant>; ] ||
  [ font-feature-settings: <font-feature-settings>; ] ||
  [ font-variation-settings: <font-variation-settings>; ] ||
  [ font-stretch: <font-stretch>; ] ||
  [ font-weight: <font-weight>; ] ||
  [ font-style: <font-style>; ] ||
  [ size-adjust: <size-adjust>; ] ||
  [ ascent-override: <ascent-override>; ] ||
  [ descent-override: <descent-override>; ] ||
  [ line-gap-override: <line-gap-override>; ]
}

where
<family-name> = <string> | <custom-ident>+

取值

font-family

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

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标签上。

<html>
<head>
  <title>Web Font Sample</title>
  <style type="text/css" media="screen, print">
    @font-face {
      font-family: "Unifont";
      src: url("unifont-14.0.01.ttf");
    }

    body { font-family: "Unifont", serif }
  </style>
</head>
<body>
<h1>
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 补充。</h1>

</html>

 

在接下来的例子中，用到了用户本地字体"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

规范

SpecificationStatusComment
WOFF File Format 2.0WOFF2 font formatRecommendationFont format specification with new compression algorithm
WOFF File Format 1.0WOFF font formatRecommendationFont format specification
CSS Fonts Module Level 3@font-faceRecommendationInitial definition

浏览器兼容性

Report problems with this compatibility data on GitHub

desktopmobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung Internet

@font-face

Full support1Full support12Full support3.5Full support4Full support10Full support3.1Full support37Full support18Full support4Full support10.1Full support2Full support1.0
SVG fonts

DeprecatedNon-standard

No support1 – 38No supportNoNo supportNoNo supportNoNo support15 – 25Full support3.1No support37 – 38No support18 – 38No supportNoNo support14 – 25Full support3No support1.0 – 3.0

WOFF

Full support6Full support12Full support3.5Full support9Full support11.1Full support5.1Full support4.4Full support18Full support4Full support11.1Full support5Full support1.0

WOFF 2

Full support36Full support14Full support39No supportNoFull support23Full support10

footnote

Open		Full support37Full support36Full support39Full support24Full support10Full support3.0
ascent-overrideFull support87Full support87Full support89No supportNoFull support73No supportNoFull support87Full support87Full support89Full support62No supportNoFull support14.0
descent-overrideFull support87Full support87Full support89No supportNoFull support73No supportNoFull support87Full support87Full support89Full support62No supportNoFull support14.0
font-displayFull support72Full support79Full support58No supportNoFull support60Full support11.1Full support72Full support72Full support58Full support51Full support11.3Full support11.0
font-familyFull support4Full support12Full support3.5Full support6Full support10Full support3.1Full support2.2Full support18Full support4Full support10.1Full support2Full support1.0

font-feature-settings

No supportNoNo supportNoFull support34

footnote

Open		No supportNoNo supportNoNo supportNoNo supportNoNo supportNoFull support34

footnote

Open		No supportNoNo supportNoNo supportNo
font-stretchFull support62Full support17Full support62No supportNoFull support49Full support10.1Full support62Full support62Full support62Full support41Full support10.3Full support6.0
font-styleFull support4Full support12Full support3.5Full support4Full support10Full support3.1Full support37Full support18Full support4Full support10.1Full support2Full support1.0
font-variantFull support4Full support12Full support3.5Full support4Full support10Full support3.1Full support37Full support18Full support4Full support10.1Full support2Full support1.0
font-variation-settingsFull support62Full support79Full support62No supportNoFull support49No supportNoFull support62Full support62Full support62Full support46No supportNoFull support8.0
font-weightFull support4Full support12Full support3.5Full support4Full support10Full support3.1Full support37Full support18Full support4Full support10.1Full support2Full support1.0
line-gap-overrideFull support87Full support87Full support89No supportNoFull support73No supportNoFull support87Full support87Full support89Full support62No supportNoFull support14.0
size-adjustFull support92Full support92Full support92OpenNo supportNoFull support78No supportNoFull support92Full support92Full support92No supportNoNo supportNoFull support16.0
srcFull support4Full support12Full support3.5Full support6Full support10Full support3.1Full support2.2Full support18Full support4Full support10.1Full support2Full support1.0

Support for format keywords

No supportNoNo supportNoNo supportNoNo supportNoNo supportNoFull support4No supportNoNo supportNoNo supportNoNo supportNoFull support5No supportNo
unicode-rangeFull support1Full support12Full support36Full support9Full support15Full support3.1Full support37Full support18Full support36Full support14Full support3Full 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?

本文标签： 字体页面服务器htmlcss

版权声明：本文标题：HTML页面引入字体@font-face CSS指定字体从远程服务器下载 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/xitong/1728200572a1149323.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。