加载笔记内容...
加载笔记内容...
在 CSS 中，可以为同一个 font-family 名称设置多个 font-weight，从而实现通过加粗或细化字体的效果。这种方法允许你为一个字体系列定义多个不同权重的字体文件，并在使用时根据需要自动切换。
font-weight1@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}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}font-weight 的范围
CSS 中 font-weight 的值可以是关键字或数值：
normal (等同于 400)，bold (等同于 700)。100 到 900，通常以 100 为步进。不同权重的字体文件
每个字体文件都需要匹配相应的 font-weight 值。例如：
400。700。300。统一 font-family 名称
为所有权重的字体文件使用相同的 font-family 名称，浏览器会根据 font-weight 值自动选择合适的字体文件。
浏览器兼容性
现代浏览器支持这种方式，确保字体文件的格式（如 woff2 和 woff）可以兼容目标用户的浏览器。
字体文件大小
仅加载需要的权重，避免加载不必要的字体文件。
字体子集优化
如果字体文件包含多种语言字符，使用子集优化工具（如 Font Squirrel）生成仅包含目标字符的文件，以减小文件大小。
懒加载字体
针对非关键字体权重，使用懒加载方式优化页面性能。
通过这种方式，你可以灵活地为一个字体名称绑定多种权重，并在样式中通过 font-weight 属性轻松切换。