如何在Blazor中添加本地字体？Source Sans Pro加载失败排查

• 文件夹名称不匹配：你的CSS里写的是../fonts/SourceSansPro-Regular.ttf，但实际字体文件放在了css/source-sans-pro/font/（注意是font而非fonts）。要么把字体文件夹改名为fonts，要么把CSS里的路径改成../font/SourceSansPro-Regular.ttf。

• 缺少字体格式声明：在@font-face的src里补充格式声明，帮助浏览器正确识别字体类型，修改后代码如下：

@font-face {
  font-family: 'Source Sans Pro';
  src: url('../fonts/SourceSansPro-Regular.ttf') format('truetype');
}

• 确认字体文件与文件名一致性：检查下载的字体文件名是否和CSS里的SourceSansPro-Regular.ttf完全一致（注意大小写，部分服务器/系统对大小写敏感），同时确保字体文件没有损坏、下载完整。

• 确保页面CSS正确引用该字体：在全局样式（比如body或其他元素）里明确指定使用这个字体，示例代码：

body {
  font-family: 'Source Sans Pro', sans-serif;
}

• 检查CSS文件的加载状态：打开浏览器开发者工具（F12），切换到「网络」标签，刷新页面，查看source-sans-pro.css是否成功加载（状态码200）。如果加载失败，检查页面中<link>标签的路径是否正确，比如如果页面不在根目录，可调整为绝对路径：/css/source-sans-pro/css/source-sans-pro.css。

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