CSS @规则(At-rules)系列详解
___@font-face规则使用方法
本文目录：
零、时光宝盒
（https://blog.csdn.net/weixin_69553582 逆境清醒）
就命运而言，休论公道。从我们出生到离开这个世界，这条人生路该怎样走，没有人清楚地告诉我们。父母长辈指引的，或许是他们觉得正确的路，但未必真的是适合你或者是你自己真正想要的。所以，我们总是在跌跌撞撞中摸索前行。
指望短时间内老天有眼是不可能的，因为我们的一生，在时间的长河里显得那么微不足道却又举足轻重，因为每一个不起眼的改变，都可能影响到整个历史的发展，所以，很难让每一个人都及时感觉到他认为应有的反馈。所以，才有那么多人感叹命运不公，善恶同在，老天他没有心疼那些善良之人受的苦，也没有惩戒那些造成混乱伤害的恶人。给了恶人一条宽敞的路，让恶行大行其道；给了善良之人一条崎岖的路，让善良的人在困境下举步维艰，备受折磨。
有的人因为自身受到不公平的对待，选择了报复，用极端的行为和思想报复其他人和报复这个社会，借此发泄内心的不满。有的人在打击下逐渐灰色化，冷漠对待身边事物，只要不伤害到自己，默认让任何事情发生和继续。有的人却因为遭受过痛苦，受过苦难，所以对他人的苦难也更容易感同身受，所以单方面选择了宽恕，选择了无条件去爱护同样身处暴风雨中的受苦之人。正因如此，善才难能可贵。
从某种方面来说，老天的冷眼旁观，在告知你未必有“善有善报”的“果”的条件下，让人类自己去选择种行善还是作恶的“因”，造就了人性的复杂和分化，造就了人与人之间的分类。今天的各种“因”，会决定了你以后（不是这辈子）的“果”。而你今天的一个选择，有可能会影响到你身边人的命运，是他（她）们选择决定人生路的“因”或者“果”。例如，你今天选择了善良对待善良之人“A”和“B”，对身处困境中的“A”来说，你就是他以前善良为人而获得的善报，即：善有善报的“果”现时体现。而对“B"来说，你今天对“B”的善行，有可能就是以后你身陷困境时，“B”伸手帮你的“因”，而这一帮，就是你今天善良对待“A”和“B”获得善有善报的“果”的体现。
我个人一直不太认同那些为了积累“功德”而刻意做“功德”的做法，总觉得那是种交换，失去了原本的意义。但不可否认，这种做法，在某种程度上阻止和减轻了恶的盛行，而这一切，又是人类在善恶选择下自然进化出现的分类，是平衡，也是必然。
一切选择从心吧，是那颗原本属于自己的心，而不是被迷惑操控下的非本心。
补充内容：CSS @规则(At-rules)系列详解___@import规则使用方法-CSDN博客
逆境清醒
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 中产生意外结果！
- @font-face {
- font-family: "MyFont";
- src: url("path/to/font-file.ttf");
- }
这里，`font-family` 指定了自定义字体的名称，`src` 指定了字体文件的路径。
4、接下来，将自定义字体应用到需要使用的元素中。
- body {
- font-family: "MyFont", sans-serif;
- }
在这个例子中，`font-family` 设置为 `"MyFont"`，表示该元素应该使用自定义字体。
如果字体无法加载，会回退到浏览器默认的 sans-serif 字体。
请注意，不同的字体文件类型需要使用不同的 `src` 属性值。
例如，TrueType 字体文件使用 `.ttf` 扩展名，而 OpenType 字体文件使用 `.otf` 扩展名。
您还可以在 `src` 属性中指定字体文件的格式和指定多个字体文件，以便在不同的浏览器中使用不同的字体文件。例如：
- @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）：
- div {
- font-family: myFirstFont;
- }
二、@font-face语法
语法：
- @font-face =
- @font-face {
}
实例格式：
- @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 选择器内声明。例如，以下操作无效
- @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：
- @font-face {
- font-family: myFont1;
- src: url(sansation_light.woff);
- }
3.2、@font-face 里添加文本的描述符
@font-face 里添加包含粗体文本的描述符的规则
- @font-face {
- font-family: myFirstFont;
- src: url(sansation_bold.woff);
- font-weight: bold;
- }
3.3、设置多个 @font-face 规则。
- html>
- <html>
- <body>
- <div>myFirstFont1:@font-face
myFirstFont2@font-face