CSS中本地True Type Fonts(ttf)字体引入失效问题求助

我来帮你排查下本地加载Open Sans字体没生效的常见问题，你可以逐一核对：

• 检查字体文件路径是否正确
  这是最容易踩的坑！你写的../fonts/OpenSans_Regular/OpenSans-Regular.ttf是相对路径，得确保它和你的CSS文件位置匹配。比如如果CSS文件在/css/style.css，那../fonts指向的是项目根目录下的fonts文件夹，你要确认字体文件确实放在这个位置。
  快速验证方法：打开浏览器开发者工具的「Network」标签，筛选「Fonts」类别，刷新页面看看字体文件有没有返回404错误——如果有，说明路径肯定错了，改成绝对路径（比如/fonts/...）试试。

• 完善@font-face的属性定义
  你的代码里只写了font-family和src，缺少font-weight和font-style，这可能导致浏览器无法正确匹配字体。Open Sans Regular对应的权重是400，样式是normal，补充后能让字体更稳定生效：

  @font-face {
    font-family: 'Open Sans'; /* 建议和原谷歌字体名称一致，方便替换 */
    font-weight: 400;
    font-style: normal;
    src: url('../fonts/OpenSans_Regular/OpenSans-Regular.ttf') format("truetype");
  }
  

• 多格式字体提升兼容性
  单一ttf格式可能在部分浏览器上支持不佳，建议同时提供woff2、woff、ttf三种格式（woff2体积最小，加载最快），写法如下：

  @font-face {
    font-family: 'Open Sans';
    font-weight: 400;
    font-style: normal;
    src: url('../fonts/OpenSans_Regular/OpenSans-Regular.woff2') format('woff2'),
         url('../fonts/OpenSans_Regular/OpenSans-Regular.woff') format('woff'),
         url('../fonts/OpenSans_Regular/OpenSans-Regular.ttf') format('truetype');
  }
  

• 清除浏览器缓存
  有时候浏览器会缓存旧的CSS或字体文件，导致新的@font-face规则不生效。你可以用Ctrl+Shift+R强制刷新页面，或者手动清除浏览器缓存后再测试。

• 验证字体文件完整性
  确认你下载的Open Sans字体文件没有损坏——直接打开字体文件（比如用系统字体预览功能），如果无法正常显示，就重新从官方渠道下载完整的字体包。

修正后的完整示例代码 #

/* 替换原来的@import语句 */
@font-face {
  font-family: 'Open Sans';
  font-weight: 400;
  font-style: normal;
  src: url('../fonts/OpenSans_Regular/OpenSans-Regular.woff2') format('woff2'),
       url('../fonts/OpenSans_Regular/OpenSans-Regular.woff') format('woff'),
       url('../fonts/OpenSans_Regular/OpenSans-Regular.ttf') format('truetype');
}

#ok {
  font-family: 'Open Sans', sans-serif;
  /* 加上sans-serif作为降级字体，避免字体加载失败时显示异常 */
}

最后提醒下：一定要通过浏览器开发者工具检查字体文件的加载状态，这是快速定位问题的核心手段！

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