@font-face 是 CSS 中的一个规则，用于定义自定义字体。通过 @font-face 规则，你可以引入并使用网页上没有安装的字体。这对于网页设计中的字体定制非常有用，可以确保你的网页在用户端正确显示所需的字体。
@font-face 规则的语法
1 | @font-face { |
详解
-
+
- font-family： 指定字体的名称，以供后续在 CSS 中使用。这是你在
font-family属性中引用字体时所使用的名称。
+ - src： 指定字体文件的路径和格式。通常，你需要提供字体文件的绝对或相对路径，并指定字体的格式（如
woff2、woff、ttf等）。可以提供多个src声明，以提供备用字体文件，以备不同浏览器和操作系统使用不同的格式。
+ - font-weight 和 font-style： 这两个属性是可选的。它们允许你指定字体的粗细和风格。如果没有指定，将使用字体文件中的默认值。 +
使用示例
1 | @font-face { |
在这个例子中：
+-
+
@font-face规则定义了一个名为'MyCustomFont'的自定义字体，它的来源是'path/to/your/font.woff2'文件。
+- 在
body中，通过font-family属性将整个页面的默认字体设置为'MyCustomFont'。这样，整个页面的文字都会使用这个自定义字体。
+
确保替换 'path/to/your/font.woff2' 为你实际字体文件的路径。此外，你可以提供多个字体格式，以提高在不同浏览器和操作系统上的兼容性。
+
format() 的作用
format() 是 @font-face 规则中的一个子属性，用于指定字体文件的格式。不同的浏览器和操作系统支持不同的字体文件格式，因此通过 format() 属性，你可以告诉浏览器如何解释字体文件。
常见的字体文件格式包括 WOFF（Web Open Font Format）、WOFF2（Web Open Font Format 2.0）、TTF（TrueType Font）、OTF（OpenType Font）等。通过提供适当的格式，你可以增加网页在各种设备和浏览器上正确显示字体的机会。
+语法
1 | @font-face { |
在这个例子中，format('woff') 表示字体文件的格式是 WOFF。
常见的 format 值
-
+
format('woff')： WOFF 格式的字体文件。
+format('woff2')： WOFF 2.0 格式的字体文件，是 WOFF 的升级版，通常更加高效。
+format('truetype')： TrueType 字体文件格式。
+format('opentype')： OpenType 字体文件格式。
+format('embedded-opentype')： 嵌入式 OpenType 字体文件格式，通常用于旧版 Internet Explorer。
+
使用示例
1 | @font-face { |
在这个例子中，@font-face 规则指定了两个字体文件，一个是 WOFF2 格式的，另一个是 WOFF 格式的。浏览器会根据支持的格式选择合适的字体文件来加载。
+
font-weight 属性详解
font-weight 是 CSS 中用于设置字体粗细的属性。它的值可以是以下几种：
-
+
- 数值： 100、200、300、400、500、600、700、800、900。数值越大，字体越粗。常见的使用是
normal对应 400，bold对应 700。
+ - 关键字：
-
+
normal：定义标准的字符。
+bold：定义粗体字符。
+
+ - 全局关键字：
-
+
initial：设置属性为其默认值。
+inherit：从父元素继承属性值。
+
+
使用示例
1 | /* 使用关键字 */ |
在上述示例中，.normal-text 使用 font-weight: normal; 设置为标准字体，.bold-text 使用 font-weight: bold; 设置为粗体，.light-text 使用 font-weight: 300; 设置为较轻的字体。.default-weight 使用 font-weight: initial; 将属性值重置为默认值，而 .inherited-weight 使用 font-weight: inherit; 从父元素继承字体粗细。
这些设置可以根据设计需要和品牌规范来选择，以确保网页文本的良好可读性和一致性。
+关于Regular的定义
++在 CSS 中，
+regular字重并没有一个具体的数值标准，它通常是指字体家族中的默认或普通字重。具体的字体家族和其对应的字重可能有所不同，因为这是由字体设计者和字体提供商决定的。一般而言，
+regular字重对应于数值400。在某些字体家族中，regular也可能对应于normal关键字。在 CSS 中，normal字重对应于数值400。
+
字体格式的建议
在网页开发中，字体有不同的格式，因为不同的浏览器和设备支持不同的字体格式。为了确保字体在各种环境中都能正确加载，通常会使用以下常见的字体格式：
+-
+
WOFF (Web Open Font Format)：
+-
+
- WOFF 是专门为 Web 设计的字体格式，提供了压缩和高效的字体传输。绝大多数现代浏览器都支持 WOFF 格式。 +
+1
2
3
4
5
6
7/* 引入 WOFF 格式的字体 */
@font-face {
font-family: 'YourFont';
src: url('your-font.woff') format('woff');
font-weight: normal;
font-style: normal;
}
+WOFF2 (Web Open Font Format 2)：
+-
+
- WOFF2 是 WOFF 的升级版，具有更好的压缩效果，但它不支持的浏览器较少。然而，对于支持的浏览器，WOFF2 是首选的字体格式。 +
+1
2
3
4
5
6
7/* 引入 WOFF2 格式的字体 */
@font-face {
font-family: 'YourFont';
src: url('your-font.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
+TTF/OTF (TrueType/OpenType)：
+-
+
- TTF 和 OTF 是传统的字体格式，适用于许多设备和浏览器。但它们相对于 WOFF 来说文件大小较大，因此在 Web 中使用时可能不如 WOFF/WOFF2 效率高。 +
1
2
3
4
5
6
7/* 引入 TTF 格式的字体 */
@font-face {
font-family: 'YourFont';
src: url('your-font.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
+
在使用字体时，可以使用多个格式，以提供对不同浏览器的更好支持。例如：
+1 | @font-face { |
这样，浏览器将根据支持的格式选择合适的字体。确保字体文件在服务器上正确托管，并且在 CSS 中正确引用字体路径。
+ +