返回
创建于
状态公开

在 CSS 中，可以为同一个 font-family 名称设置多个 font-weight，从而实现通过加粗或细化字体的效果。这种方法允许你为一个字体系列定义多个不同权重的字体文件，并在使用时根据需要自动切换。

示例：一个字体设置多个 font-weight

定义字体

css
1@font-face {
2    font-family: 'CustomFont'; /* 统一的字体名称 */
3    src: url('font-regular.woff2') format('woff2'),
4         url('font-regular.woff') format('woff');
5    font-weight: 400; /* Regular 权重 */
6    font-style: normal;
7}
8
9@font-face {
10    font-family: 'CustomFont'; /* 统一的字体名称 */
11    src: url('font-bold.woff2') format('woff2'),
12         url('font-bold.woff') format('woff');
13    font-weight: 700; /* Bold 权重 */
14    font-style: normal;
15}
16
17@font-face {
18    font-family: 'CustomFont'; /* 统一的字体名称 */
19    src: url('font-light.woff2') format('woff2'),
20         url('font-light.woff') format('woff');
21    font-weight: 300; /* Light 权重 */
22    font-style: normal;
23}

应用字体

css
1/* 正常字体 */
2body {
3    font-family: 'CustomFont', sans-serif;
4    font-weight: 400;
5}
6
7/* 加粗字体 */
8h1 {
9    font-family: 'CustomFont', sans-serif;
10    font-weight: 700;
11}
12
13/* 轻字体 */
14small {
15    font-family: 'CustomFont', sans-serif;
16    font-weight: 300;
17}

关键点说明

  1. font-weight 的范围
    CSS 中 font-weight 的值可以是关键字或数值：

    • 关键字：normal (等同于 400)，bold (等同于 700)。
    • 数值：范围从 100 到 900，通常以 100 为步进。

  2. 不同权重的字体文件
    每个字体文件都需要匹配相应的 font-weight 值。例如：

    • Regular 字体文件设置为 400。
    • Bold 字体文件设置为 700。
    • Light 字体文件设置为 300。

  3. 统一 font-family 名称
    为所有权重的字体文件使用相同的 font-family 名称，浏览器会根据 font-weight 值自动选择合适的字体文件。

  4. 浏览器兼容性
    现代浏览器支持这种方式，确保字体文件的格式（如 woff2 和 woff）可以兼容目标用户的浏览器。

优化建议

  • 字体文件大小
    仅加载需要的权重，避免加载不必要的字体文件。

  • 字体子集优化
    如果字体文件包含多种语言字符，使用子集优化工具（如 Font Squirrel）生成仅包含目标字符的文件，以减小文件大小。

  • 懒加载字体
    针对非关键字体权重，使用懒加载方式优化页面性能。

通过这种方式，你可以灵活地为一个字体名称绑定多种权重，并在样式中通过 font-weight 属性轻松切换。