@font-face配置后Roboto字体在浏览器不显示的问题咨询

这问题我碰到过好几次，其实核心是浏览器虽然在开发者工具里显示指定了Roboto字体，但实际上字体文件根本没加载成功，直接 fallback 到了系统默认的 Times Roman 而已。给你几个排查和解决的步骤：

• 先确认字体文件路径是否正确
  直接在浏览器地址栏输入你的字体文件URL（比如/fonts/roboto/Roboto-Regular.ttf），看看能不能正常下载这个文件。如果打不开，说明路径写错了或者服务器上的字体文件缺失，修正路径或者上传正确的文件就行。

• 完善@font-face规则，补充格式和fallback字体
  你当前的规则只指定了TTF格式，而且没有明确字重、样式，也没给fallback选项。建议修改成这样：

  @font-face {
    font-family: 'Roboto';
    src: url('/fonts/roboto/Roboto-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }
  
  /* 全局或者目标元素设置字体时加上fallback */
  body {
    font-family: 'Roboto', sans-serif;
  }
  

  加上format('truetype')能帮助浏览器识别字体格式，而sans-serif作为fallback，会让字体加载失败时显示系统无衬线字体（比如Arial），而不是Times Roman这种衬线字体。

• 检查CORS跨域问题
  如果你的字体文件和网页不在同一个域名下，或者服务器没有配置CORS头，浏览器会阻止加载字体文件。需要在服务器的响应头里添加Access-Control-Allow-Origin: *（或者指定你的域名），允许网页跨域加载字体。

• 提供多格式字体文件提升兼容性
  TTF格式虽然通用，但WOFF/WOFF2是更适合网页的字体格式（体积更小、加载更快）。建议同时提供这些格式，让浏览器选择最优的加载：

  @font-face {
    font-family: 'Roboto';
    src: url('/fonts/roboto/Roboto-Regular.woff2') format('woff2'),
         url('/fonts/roboto/Roboto-Regular.woff') format('woff'),
         url('/fonts/roboto/Roboto-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* 让浏览器先显示fallback字体，等Roboto加载完再替换 */
  }
  

  新增的font-display: swap还能提升用户体验，避免页面加载时出现文字闪烁或者空白。

• 排查是否有CSS规则冲突
  检查页面中有没有其他CSS规则覆盖了你的font-family设置，比如某些第三方样式或者更优先级高的选择器（比如ID选择器）把字体改成了Times Roman。可以在开发者工具的Elements面板里查看目标元素的Computed样式，确认最终生效的font-family是不是你设置的Roboto, sans-serif。

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