CSS @规则(At-rules)系列详解___@font-face规则使用方法
CSS @规则(At-rules)系列详解
___@font-face规则使用方法
本文目录：
零、时光宝盒
（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 中产生意外结果！
@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 { <declaration-list> } 实例格式：
@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 规则。
<!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、指定可下载字体
此示例指定要使用的可下载字体，并将其应用于文档的整个主体
<!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”的可下载字体。
@font-face {
font-family: "MyHelvetica";
src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"),
url("MgOpenModernaBold.ttf");
font-weight: bold;
}
四、参考资料：
mdn.org.cn
www.w3school.com.cn
推荐阅读：
|
|
|
|
| 给照片换底色（python+opencv） | 猫十二分类 | 基于大模型的虚拟数字人__虚拟主播实例 |
|
|
|
|
| 计算机视觉__基本图像操作（显示、读取、保存） | 直方图（颜色直方图、灰度直方图） | 直方图均衡化（调节图像亮度、对比度） |
|
|
|
|
|
| ||
|
| ||
| Three.js实例详解___旋转的精灵女孩(附完整代码和资源)（一） | ||
|
|
|
|
| 立体多层玫瑰绘图源码__玫瑰花python 绘图源码集锦 | ||
|
|
|
|
| 用代码写出浪漫__合集（python、matplotlib、Matlab、java绘制爱心、玫瑰花、前端特效玫瑰、爱心） | python爱心源代码集锦（18款） | |
|
|
|
|
|
|
| |
| 用代码过中秋，python海龟月饼你要不要尝一口？ | ||
|
|
|
|
| 草莓熊python turtle绘图（风车版）附源代码 | ||
|
|
| |
| 皮卡丘python turtle海龟绘图（电力球版）附源代码 | ||
|
|
|
|
| 2024年6月多家权威机构____编程语言排行榜__薪酬状况 | ||
|
|
|
|
| 【CSDN云IDE】个人使用体验和建议（含超详细操作教程）（python、webGL方向) | ||
|
|
|
|
原文地址：https://blog.csdn.net/weixin_69553582/article/details/141321664
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！