如何在Angular 2中通过[ngStyle]修改@Font-Face属性按需加载用户选中字体？

嘿，这个问题我之前也碰到过——直接用[ngStyle]是没法修改@font-face属性的，因为@font-face是全局的CSS规则，而[ngStyle]只能给单个DOM元素设置内联样式属性。不过别担心，我们可以换个思路来实现「切换字体+仅加载选中字体」的需求，具体步骤如下：

核心逻辑是：动态创建@font-face规则加载选中的字体 + 用[ngStyle]给目标元素绑定对应字体族，这样既能保证只加载用户选中的字体，又能实现字体切换效果。

步骤1：组件内定义字体选项与状态 #

先在组件类里维护可选的字体列表，以及当前选中的字体状态：

import { Component, Renderer2 } from '@angular/core';

@Component({
  selector: 'app-font-switcher',
  templateUrl: './font-switcher.component.html'
})
export class FontSwitcherComponent {
  // 字体选项：包含显示名、自定义字体族名、字体文件URL
  fontOptions = [
    { displayName: '默认系统字体', fontFamily: 'sans-serif', url: '' },
    { displayName: 'Open Sans', fontFamily: 'CustomOpenSans', url: '/assets/fonts/OpenSans-Regular.woff2' },
    { displayName: 'Roboto', fontFamily: 'CustomRoboto', url: '/assets/fonts/Roboto-Regular.woff2' }
  ];
  currentFont = this.fontOptions[0]; // 默认选中第一个

  constructor(private renderer: Renderer2) {}
}

步骤2：动态创建@font-face并加载选中字体 #

当用户切换字体时，先检查该字体是否已加载，未加载则通过Renderer2创建style标签插入@font-face规则，触发浏览器加载字体文件：

// 在组件类中添加切换字体的方法
switchFont(selectedFont: any) {
  this.currentFont = selectedFont;

  // 默认字体无需加载额外文件，直接返回
  if (!selectedFont.url) return;

  // 避免重复加载同一字体
  const existingFontStyle = document.querySelector(`style[data-font="${selectedFont.fontFamily}"]`);
  if (existingFontStyle) return;

  // 创建style标签并插入@font-face规则
  const styleElement = this.renderer.createElement('style');
  this.renderer.setAttribute(styleElement, 'data-font', selectedFont.fontFamily);
  
  const fontFaceRule = `
    @font-face {
      font-family: "${selectedFont.fontFamily}";
      src: url("${selectedFont.url}") format("woff2");
      font-weight: normal;
      font-style: normal;
    }
  `;
  
  this.renderer.appendChild(styleElement, this.renderer.createText(fontFaceRule));
  this.renderer.appendChild(document.head, styleElement);
}

步骤3：用[ngStyle]给目标元素设置字体族 #

在模板中，给需要切换字体的元素绑定[ngStyle]，将font-family设置为当前选中的字体族名：

<!-- 字体选择下拉框 -->
<select (change)="switchFont(fontOptions[$event.target.value])">
  <option *ngFor="let font of fontOptions; let i = index" [value]="i">
    {{ font.displayName }}
  </option>
</select>

<!-- 需要切换字体的内容容器 -->
<div [ngStyle]="{ 'font-family': currentFont.fontFamily }" class="content">
  这是会切换字体的示例文本，你可以在这里输入更多内容测试效果。
</div>

额外优化建议 #

• 可以把字体加载逻辑封装成独立服务（比如FontLoaderService），方便在多个组件复用；
• 可添加字体加载状态提示（比如loading动画），优化用户体验；
• 若需支持多权重/样式字体，可扩展fontOptions结构，添加weight、style字段并对应修改@font-face规则。

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