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

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

___@font-face规则使用方法

本文目录：

零、时光宝盒

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

二、@font-face语法

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

3.1、指定一种字体

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

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

3.4、指定可下载字体

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

四、参考资料：。

---

零、时光宝盒

（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 { <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   

Font Library

www.w3school.com.cn
 

         推荐阅读：

CSS @规则(At-rules)索引目录

​​​	​​​	​​​
给照片换底色（python+opencv）	猫十二分类	基于大模型的虚拟数字人__虚拟主播实例
​​​​​	​​​​​	​​​​​
计算机视觉__基本图像操作（显示、读取、保存）	直方图（颜色直方图、灰度直方图）	直方图均衡化（调节图像亮度、对比度）
​​​​​	​​​​​	​​​​​
语音识别实战（python代码）(一）	人工智能基础篇	计算机视觉基础__图像特征

​​​​​
matplotlib 自带绘图样式效果展示速查（28种，全）
​​​​​
Three.js实例详解___旋转的精灵女孩(附完整代码和资源)（一）
​​​​​	​​​​​	​​​​​
立体多层玫瑰绘图源码__玫瑰花python 绘图源码集锦	Python 3D可视化（一）	让你的作品更出色——词云Word Cloud的制作方法（基于python，WordCloud，stylecloud)
​​​​​	​​​​​	​​​​​
python Format()函数的用法___实例详解（一）(全，例多）___各种格式化替换，format对齐打印	用代码写出浪漫__合集（python、matplotlib、Matlab、java绘制爱心、玫瑰花、前端特效玫瑰、爱心）	python爱心源代码集锦（18款）
​​​​​	​​​​​	​​​​​
Python中Print()函数的用法___实例详解(全，例多）	Python函数方法实例详解全集(更新中...)	《 Python List 列表全实例详解系列（一）》__系列总目录、列表概念
​​​​​	​​​​​
用代码过中秋，python海龟月饼你要不要尝一口？	python练习题目录
​​​​​	​​​​​	​​​​​
草莓熊python turtle绘图（风车版）附源代码	​草莓熊python turtle绘图代码（玫瑰花版）附源代码	​草莓熊python绘图（春节版，圣诞倒数雪花版）附源代码
​​​​​	​​​​​
巴斯光年python turtle绘图__附源代码	皮卡丘python turtle海龟绘图（电力球版）附源代码

​​​​​	​​​​​	​​​​​
Node.js (v19.1.0npm 8.19.3) vue.js安装配置教程（超详细）	色彩颜色对照表（一）(16进制、RGB、CMYK、HSV、中英文名)	2024年6月多家权威机构____编程语言排行榜__薪酬状况
​​​​​​	​​​​​	​​​​​
手机屏幕坏了____怎么把里面的资料导出（18种方法）	【CSDN云IDE】个人使用体验和建议（含超详细操作教程）（python、webGL方向)	查看jdk安装路径，在windows上实现多个java jdk的共存解决办法，安装java19后终端乱码的解决

​​​​​
vue3 项目搭建教程（基于create-vue，vite，Vite + Vue）
​​​​​	​​​​​	​​​​​
2023年春节祝福第二弹——送你一只守护兔，让它温暖每一个你【html5 css3】画会动的小兔子，炫酷充电，字体特	别具一格，原创唯美浪漫情人节表白专辑，(复制就可用)（html5,css3,svg)表白爱心代码(4套)	SVG实例详解系列（一）(svg概述、位图和矢量图区别（图解）、SVG应用实例）
​​​​​	​​​​​	​​​​​
【程序人生】卡塔尔世界杯元素python海龟绘图（附源代码），世界杯主题前端特效5个（附源码）	HTML+CSS+svg绘制精美彩色闪灯圣诞树，HTML+CSS+Js实时新年时间倒数倒计时(附源代码)	2023春节祝福系列第一弹（上）（放飞祈福孔明灯，祝福大家身体健康）（附完整源代码及资源免费下载）

​​​​​	​​​​​	​​​​​
tomcat11、tomcat10 安装配置（Windows环境）（详细图文）	Tomcat端口配置（详细）	Tomcat 启动闪退问题解决集（八大类详细）