自托管已下载字体是否需要为每个字体文件配置多个url？

自托管字体url填写说明 #

不需要每个字体文件单独写一个@font-face规则，分两种情况处理即可：

• 如果是同一个字重、同一样式的字体，只是提供了不同格式的文件（比如woff2、woff、ttf等），可以直接把所有url都填到同一个src属性里，按兼容性优先级从高到低排列，浏览器会自动选择自己能识别的第一个文件加载，不用额外写多套规则。
• 如果是同一个字体的不同字重（比如常规、粗体）、不同样式（比如常规、斜体），才需要单独写多个@font-face规则，每个规则对应对应的字重、样式参数，font-family可以保持同名，后续调用时浏览器会自动匹配对应的字体文件。

你当前的代码可以调整为兼容多格式的版本，示例如下：

@font-face {
    font-family: <替换为你的字体名称>;
    /* 按优先级从高到低排列，format声明要和实际文件格式对应 */
    src: url('./你的字体存储路径/字体名.woff2') format('woff2'),
         url('./你的字体存储路径/字体名.woff') format('woff'),
         url('./你的字体存储路径/字体名.ttf') format('truetype');
    /* 常规字重填400，粗体填700，按实际情况调整 */
    font-weight: 400;
    /* 常规样式填normal，斜体填italic，按实际情况调整 */
    font-style: normal;
    /* 可选配置：字体加载完成前先显示备用字体，避免页面文字长时间空白 */
    font-display: swap;
}
html, body {
    font-family: <替换为你的字体名称>, sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

内容的提问来源于stack exchange，提问作者Denver