本地使用@font-face引入字体在localhost无法正常显示求助

排查与修复步骤 #

1. 确认字体路径与格式兼容性 #

• 先检查下载的Autumn Regular字体文件格式（一般是ttf/woff/woff2），确保@font-face里的url()路径完全正确——比如字体放在项目fonts文件夹下，路径就得写成url('./fonts/Autumn-Regular.ttf')，写错路径直接导致字体加载失败。
• 建议同时声明多种格式适配不同浏览器，示例代码：

@font-face {
  font-family: 'Autumn Regular';
  src: local('Autumn Regular'),
       url('./fonts/Autumn-Regular.woff2') format('woff2'),
       url('./fonts/Autumn-Regular.woff') format('woff'),
       url('./fonts/Autumn-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

2. 强制覆盖表格元素的默认字体 #

浏览器对表格的td、th元素可能有默认字体优先级，得显式提高样式权重：

/* 给表格加个类名（比如ranking-table），用更高权重的选择器 */
.ranking-table td,
.ranking-table tfoot th {
  font-family: 'Autumn Regular', sans-serif;
  /* 要是还不生效，临时加!important强制覆盖（不推荐长期用，优先调权重） */
  /* font-family: 'Autumn Regular' !important; */
}

3. 用开发者工具验证加载状态 #

• 按F12打开开发者工具，切到Network面板，筛选Font类型，刷新页面看字体文件是不是返回200状态码——要是404，肯定是路径错了。
• 再切到Elements面板，选中目标td/th元素，看Computed标签下的font-family是不是显示Autumn Regular，要是显示系统默认字体，说明样式根本没生效，得检查选择器是不是写错了。

4. 排查字体文件与本地名称匹配问题 #

• 重新下载字体文件，避免下载时文件损坏。
• 要是用local()没效果，右键字体文件看属性里的“字体名称”，可能和你写的local('Autumn Regular')不一致，得改成完全匹配的名称。

5. 清除浏览器缓存 #

有时候旧缓存会搞事，按Ctrl+Shift+R强制刷新页面，清掉缓存再试。

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