Angular 4项目Chrome路由切换时@Font-Face渲染问题求助

我之前在做Angular项目时也踩过一模一样的Chrome路由切换字体渲染坑，结合你的场景，给你几个亲测有效的解决思路：

方案一：全局统一引入字体样式文件，避免组件重复导入 #

你的核心问题之一是每个组件都重复导入了包含@font-face的mixin文件，这会导致Chrome在路由切换时重复解析相同的字体样式，触发渲染bug。可以通过全局配置让字体样式只加载一次：

1. 找到项目根目录下的angular.json文件，定位到styles数组配置项
2. 将包含@font-face定义和@helvetica-bold变量的less文件添加到这个数组中，示例：

   "styles": [
     "src/styles.less",
     "src/assets/styles/font-definitions.less" // 替换为你的字体相关文件路径
   ]
   

3. 移除所有组件less文件中的@import字体mixin语句，直接使用@helvetica-bold变量或对应的mixin即可

这样整个应用只会加载一次字体样式，既解决了重复注入导致的Chrome渲染问题，也不会再出现变量未定义的异常。

方案二：顶层组件设置ViewEncapsulation.None，统一管理全局字体样式 #

如果不想修改全局styles配置，可以选择在最顶层的app-home组件设置无样式封装，将字体样式集中在这里，所有子组件自动继承：

1. 在app-home.component.ts中修改组件元数据，开启ViewEncapsulation.None：

   import { Component, ViewEncapsulation } from '@angular/core';
   
   @Component({
     selector: 'app-home',
     templateUrl: './home.component.html',
     styleUrls: ['./home.component.less'],
     encapsulation: ViewEncapsulation.None
   })
   export class HomeComponent {}
   

2. 在app-home.component.less中导入字体mixin和变量文件，确保所有子组件能访问到这些样式
3. 移除其他组件中重复的字体样式导入语句

这种方式既保证了字体样式全局可用，又不会让所有组件的样式都变成全局污染（只有顶层组件的样式是全局的，子组件仍保持默认的样式封装）。

方案三：给@font-face添加font-display属性优化字体加载 #

有时候Chrome的渲染问题和字体加载时机有关，给@font-face添加font-display: swap可以让浏览器优先显示系统 fallback 字体，等自定义字体加载完成后再替换，避免路由切换时文本闪烁或不显示：

@font-face {
  font-family: 'Helvetica';
  src: url('../fonts/helvetica-bold.woff2') format('woff2');
  font-weight: bold;
  font-display: swap; // 新增这个属性
}

这个方案可以和前两个方案结合使用，进一步优化字体渲染的稳定性。

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