能否在CSS中为同格式的同一字体设置多个加载位置？

当然可以实现，CSS的@font-face规则本身就支持为同格式字体指定多个加载源，浏览器会按你写的顺序依次尝试加载，直到找到可用的资源。

核心思路就是在src属性里按优先级列出多个url()，先写CDN的链接，再写本地服务器的路径，示例代码如下：

@font-face {
  font-family: 'CustomFont';
  font-weight: 400;
  font-style: normal;
  /* 优先加载CDN字体，失败则 fallback 到本地 */
  src: url('https://cdn.yourdomain.com/fonts/custom-font.woff2') format('woff2'),
       url('/local-fonts/custom-font.woff2') format('woff2');
}

关键注意事项： #

• 务必保证两个字体文件完全一致：相同格式、相同字重、相同样式，避免加载不同版本的字体导致页面显示混乱。
• 每个url()后面的format()声明要统一（这里都是woff2），帮助浏览器快速识别字体格式，提升加载效率。
• 如果需要不同字重或样式的字体，只需单独写对应的@font-face规则，同样按优先级设置多源即可。

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