Angular 10项目中Roboto字体已加载但未渲染的问题

以下是针对你的情况的排查和解决步骤：

1. 核对@font-face的字体家族名称 #

打开Sources面板中的roboto-fontface.css，检查里面的@font-face声明，确认font-family的取值是否和你组件类中写的一致。比如常规体的声明应该类似：

@font-face {
  font-family: 'Roboto';
  src: url('../fonts/roboto-regular-webfont.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

如果文件里的font-family是'Roboto Regular'这类带后缀的名称，你组件里的font-family: Roboto就无法匹配，需要把组件类里的名称改成和@font-face一致，或者修改@font-face里的名称统一为'Roboto'。

2. 明确指定字体权重 #

在组件的自定义类中，明确添加font-weight属性，对应你加载的字体权重（常规体400，粗体700），同时加上备用字体便于测试：

.roboto-text {
  font-family: Roboto, sans-serif;
  font-weight: 400; /* 对应你加载的常规体 */
}

这样如果Roboto没生效，会显示系统的sans-serif字体，能快速判断是否字体问题。

3. 检查样式优先级冲突 #

在开发者工具的Elements面板中，选中目标<p>元素，查看Computed标签下的font-family属性：

• 如果Roboto被划掉，说明有更高优先级的样式覆盖了你的自定义类。可以尝试给自定义类提高优先级（比如用p.roboto-text代替.roboto-text），或者临时加!important测试（不推荐长期使用）。
• 如果Computed里根本没有Roboto，检查你的类是否确实正确应用到了元素上（Elements面板的Classes列表里能看到）。

4. 验证Angular样式封装影响 #

Angular组件样式默认是封装的，如果你的自定义类写在组件的styles数组里，可能被全局样式或其他组件样式覆盖。可以尝试：

• 把自定义类移到styles.css这类全局样式文件中测试。
• 临时在组件样式中使用::ng-deep强制穿透封装（仅用于排查，不推荐生产环境）：

::ng-deep .roboto-text {
  font-family: Roboto, sans-serif;
  font-weight: 400;
}

5. 清除浏览器缓存 #

有时候浏览器会缓存旧的字体资源，即使网络面板显示200也可能是缓存的无效文件。按Ctrl+Shift+R强制刷新页面，或者在开发者工具的Network标签下勾选Disable cache后重新加载。

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