CSS @规则(At-rules)系列详解___@font-face规则使用方法

CSS @规则(At-rules)系列详解

___ @font-face规则使用方法

本文目录：

零、时光宝盒

一、CSS@font-face规则定义和用法

二、@font-face语法

三、@font-face使用方法例子

3.1、指定一种字体

[3.2、@font-face 里添加文本的描述符](#3.2、@font-face 里添加文本的描述符)

[3.3、设置多个 @font-face 规则。](#3.3、设置多个 @font-face 规则。)

3.4、指定可下载字体

3.5、指定本地字体替代方案

四、参考资料：。

零、时光宝盒

**（**https://blog.csdn.net/weixin_69553582 逆境清醒）

就命运而言，休论公道。从我们出生到离开这个世界，这条人生路该怎样走，没有人清楚地告诉我们。父母长辈指引的，或许是他们觉得正确的路，但未必真的是适合你或者是你自己真正想要的。所以，我们总是在跌跌撞撞中摸索前行。

指望短时间内老天有眼是不可能的，因为我们的一生，在时间的长河里显得那么微不足道却又举足轻重，因为每一个不起眼的改变，都可能影响到整个历史的发展，所以，很难让每一个人都及时感觉到他认为应有的反馈。所以，才有那么多人感叹命运不公，善恶同在，老天他没有心疼那些善良之人受的苦，也没有惩戒那些造成混乱伤害的恶人。给了恶人一条宽敞的路，让恶行大行其道；给了善良之人一条崎岖的路，让善良的人在困境下举步维艰，备受折磨。

有的人因为自身受到不公平的对待，选择了报复，用极端的行为和思想报复其他人和报复这个社会，借此发泄内心的不满。有的人在打击下逐渐灰色化，冷漠对待身边事物，只要不伤害到自己，默认让任何事情发生和继续。有的人却因为遭受过痛苦，受过苦难，所以对他人的苦难也更容易感同身受，所以单方面选择了宽恕，选择了无条件去爱护同样身处暴风雨中的受苦之人。正因如此，善才难能可贵。

从某种方面来说，老天的冷眼旁观，在告知你未必有"善有善报"的"果"的条件下，让人类自己去选择种行善还是作恶的"因"，造就了人性的复杂和分化，造就了人与人之间的分类。今天的各种"因"，会决定了你以后（不是这辈子）的"果"。而你今天的一个选择，有可能会影响到你身边人的命运，是他（她）们选择决定人生路的"因"或者"果"。例如，你今天选择了善良对待善良之人"A"和"B"，对身处困境中的"A"来说，你就是他以前善良为人而获得的善报，即：善有善报的"果"现时体现。而对"B"来说，你今天对"B"的善行，有可能就是以后你身陷困境时，"B"伸手帮你的"因"，而这一帮，就是你今天善良对待"A"和"B"获得善有善报的"果"的体现。

我个人一直不太认同那些为了积累"功德"而刻意做"功德"的做法，总觉得那是种交换，失去了原本的意义。但不可否认，这种做法，在某种程度上阻止和减轻了恶的盛行，而这一切，又是人类在善恶选择下自然进化出现的分类，是平衡，也是必然。

一切选择从心吧，是那颗原本属于自己的心，而不是被迷惑操控下的非本心。

逆境清醒

2024.10.13

一、CSS@font-face规则定义和用法

++@font-face：++

@font-face 是 CSS 的一个规则，用于在网页中引入自定义字体。它允许您使用字体文件来定义特定的字体样式，以及在网页中使用这些字体。

@font-face指定一个自定义字体来显示文本；

该字体可以从远程服务器或用户计算机上本地安装的字体加载。

通过使用 @font-face 规则，Web 设计师不必再使用"网络安全"字体来勉强保证页面显示，可以更好地体现自己原本的创意设计风格。

++@font-face++ ++用法如下：++

1、首先，将字体文件上传到您的服务器上，并确保您有字体文件的访问权限。或者保证网络上其他服务器上的字体能够正常使用。

2、在 CSS 中使用 @font-face 规则来定义字体。

定义字体名称（例如 MyFont），例如：font-family: "MyFont";

3、然后将字体地址指向1. 里字体文件所在。

字体文件包含在您的服务器上的某个地方，参考：src: url('MgOpenModernaBold.ttf')
如果字体文件是在不同的位置，请使用完整的URL：

src: url('https://mdn.github.io/css-examples/web-fonts/VeraSeBd.ttf')

提示：字体的url地址使用尽量用小写字母。大写字母有可能会在 IE 中产生意外结果！

css 复制代码

@font-face {
  font-family: "MyFont";
  src: url("path/to/font-file.ttf");
}

这里，`font-family` 指定了自定义字体的名称，`src` 指定了字体文件的路径。

4、接下来，将自定义字体应用到需要使用的元素中。

css 复制代码

body {
  font-family: "MyFont", sans-serif;
}

在这个例子中，`font-family` 设置为 `"MyFont"`，表示该元素应该使用自定义字体。

如果字体无法加载，会回退到浏览器默认的 sans-serif 字体。

请注意，不同的字体文件类型需要使用不同的 `src` 属性值。

例如，TrueType 字体文件使用 `.ttf` 扩展名，而 OpenType 字体文件使用 `.otf` 扩展名。

您还可以在 `src` 属性中指定字体文件的格式和指定多个字体文件，以便在不同的浏览器中使用不同的字体文件。例如：

css 复制代码

@font-face {
  font-family: "MyFont";
  src: url("path/to/font-file.woff") format("woff"),
       url("path/to/font-file.ttf") format("truetype");
}

这个例子中，字体文件被分别指定为 WOFF 和 TrueType 格式。

通过使用 @font-face 规则，您可以在网页中引入自定义字体，从而为您的网页设计提供更多样式和选择。

如需将字体用于 HTML 元素，请通过 font-family 属性引用字体的名称（myFirstFont）：

css 复制代码

div {
  font-family: myFirstFont;
}

二、@font-face语法

语法：

css 复制代码

@font-face = 
  @font-face { <declaration-list> }

实例格式：

css 复制代码

@font-face {
  font-family: "Trickster";
  src:
    local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1),
    url("trickster-outline.otf") format("opentype"),
    url("trickster-outline.woff") format("woff");
}

通常将 `url()` 和 `local()` 结合使用，以便在可用时使用用户安装的字体副本，如果在用户设备上找不到，则回退到下载字体副本。

如果提供了 `local()` 函数，则指定要在用户设备上查找的字体名称，如果用户代理找到匹配项，则使用该本地字体。否则，将下载并使用使用 `url()` 函数指定的字体资源。

浏览器尝试按其列表声明顺序加载资源，因此通常应在 `url()` 之前编写 `local()`。这两个函数都是可选的，因此包含一个或多个 `local()` 而不包含 `url()` 的规则块是可能的。如果需要具有 `format()` 或 `tech()` 值的更具体的字体，则应将其列在没有这些值的版本之前，因为否则将首先尝试并使用不太具体的变体。

通过允许作者提供自己的字体，@font-face 使设计内容不受限于所谓的"网页安全"字体（即，如此常见以至于被认为普遍可用的字体）成为可能。指定要查找和使用的本地安装字体的名称的能力，使得能够在基础之上自定义字体，同时无需依赖互联网连接即可实现。

注意：在较旧的浏览器上加载字体的回退策略在src 描述符页面中进行了描述。

@font-face at-rule 不仅可以在 CSS 的顶层使用，还可以用于任何CSS 条件组 at-rule内部。

描述符用途：

|-------------------------|----------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------|
| 描述符 | 解释 | 值 |
| ascent-override | 定义字体的升高度量。 | |
| descent-override | 定义字体的下降度量。 | |
| font-display | 根据字体是否以及何时下载并准备好使用来确定字体面的显示方式。 | |
| font-family | 指定一个名称，该名称将用作字体属性的字体面值。 | name |
| font-stretch | 一个`font-stretch`值。接受两个值以指定字体面支持的范围，例如`font-stretch: 50% 200%;`。 | normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded |
| font-style | 一个`font-style`值。接受两个值以指定字体面支持的范围，例如`font-style: oblique 20deg 50deg;`。 | normal italic oblique |
| font-weight | 一个`font-weight`值。接受两个值以指定字体面支持的范围，例如`font-weight: 100 400;`。 | normal bold 100~900 |
| font-variant | 注意：font-variant 描述符已于 2018 年从规范中删除。`font-variant`值属性受支持，但没有等效的描述符。 | |
| font-feature-settings | 允许控制 OpenType 字体中的高级排版功能。 | |
| font-variation-settings | 通过指定要变化的功能的四个字母轴名称及其变化值，允许对 OpenType 或 TrueType 字体的变化进行低级控制。 | |
| line-gap-override | 定义字体的行间距度量。 | |
| size-adjust | 定义与该字体关联的字形轮廓和度量的乘数。这使得在相同字体大小下渲染各种字体时，更容易协调其设计。 | |
| src | 指定对字体资源的引用，包括关于字体格式和技术的提示。对于 `@font-face` 规则有效，这是必需的。 | URL |
| unicode-range | 要从字体中使用的 Unicode 代码点的范围。 | unicode-range |

字体 MIME 类型

|--------------|------------|
| 格式 | MIME 类型 |
| TrueType | font/ttf |
| OpenType | font/otf |
| Web 开放字体格式 | font/woff |
| Web 开放字体格式 2 | font/woff2 |
| | |

备注：

Web 字体受相同的域名限制（字体文件必须与使用它们的页面位于同一域名下），除非使用HTTP 访问控制来放宽此限制。

@font-face 不能在 CSS 选择器内声明。例如，以下操作无效

css 复制代码

@font-face 不能在 CSS 选择器内声明，以下操作无效：

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

三、@font-face使用方法例子

3.1、指定一种字体

指定一种名为 "myFirstFont" 的字体，并规定可以找到它的 URL：

css 复制代码

@font-face {
  font-family: myFont1;
  src: url(sansation_light.woff);
}

3.2、@font-face 里添加文本的描述符

@font-face 里添加包含粗体文本的描述符的规则

css 复制代码

@font-face {
  font-family: myFirstFont;
  src: url(sansation_bold.woff);
  font-weight: bold;
}

3.3、设置多个 @font-face 规则。

css 复制代码

<!DOCTYPE html>
<html>
<head>
<style> 
@font-face {
  font-family: myFirstFont1;
  src: url(https://mdn.github.io/css-examples/web-fonts/VeraSeBd.ttf);
}

@font-face {
  font-family: myFirstFont2;
  src: url(https://github.com/mdn/css-examples/blob/main/variable-fonts/fonts/AmstelvarAlpha-VF.ttf);
  font-weight: bold;
}

div {
  font-family: myFirstFont1;
}
p{font-family: myFirstFont2;}
</style>
</head>
<body>
<div>myFirstFont1:@font-face </div>
<p>myFirstFont2@font-face</p>
</body>
</html>

3.4、指定可下载字体

此示例指定要使用的可下载字体，并将其应用于文档的整个主体

css 复制代码

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Web Font Sample</title>
    <style media="screen, print">
      @font-face {
        font-family: "Bitstream Vera Serif Bold";
        src: url("https://mdn.github.io/css-examples/web-fonts/VeraSeBd.ttf");
      }

      body {
        font-family: "Bitstream Vera Serif Bold", serif;
      }
    </style>
  </head>
  <body>
　　As we all know,love is the crux of a happy life.Love helps us stay calm and serene even when things are tough.<br>
　　It cancarry us through the hard times.Love looks for ways tobe of service.<br>
　　Love is enjoying the surprises of life, andbeing totally delighted withwhat life gives you.Love isthe key tohappiness and itis a real blessing to others.<br>
　　People who love make the world a kind and gentle place and other people feel safe around them.<br>
　　Theyappreciatedifferences instead of making them a cause for prejudice or fighting.<br><br>
众所周知，爱是幸福生活的关键所在。爱帮助我们在时事艰难的时候保持沉着，平静的心态。它能帮我们度过苦难的时光。爱会自己寻找助人的途径。爱是享受生命中的诸多惊喜，爱是完全满足于生活的给予。爱是幸福生活的钥匙，爱是对他人真挚的祝福。心中有爱的人让世界充满仁慈和儒雅之风，让周围的人感到安全。他们求同存异，而不是把分歧作为成见或者争执的理由。
  </body>
</html>

此示例代码的输出如下所示:

3.5、指定本地字体替代方案

在此示例中，使用用户本地安装的"Helvetica Neue Bold"；如果用户未安装该字体（会尝试使用完整字体名称和 Postscript 名称），则使用名为"MgOpenModernaBold.ttf"的可下载字体。

css 复制代码

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