Angular 16全局设置Ubuntu字体未生效，求排查解决方法

针对你遇到的本地Ubuntu字体无法生效的问题，可按以下步骤排查和修改：

1. 修正字体权重与路径配置 #

当前font-weight设置为100，但Ubuntu-Regular.ttf对应的是常规字重400，权重不匹配会导致浏览器无法匹配到对应字体，自动 fallback 到默认字体。同时确认路径加载状态：

@font-face {  
  font-family: 'ubuntu';  
  src: url('/assets/fonts/Ubuntu/Ubuntu-Regular.ttf'); /* 改用绝对路径避免相对路径歧义 */
  font-style: normal;
  font-weight: 400;  /* 改为对应Regular的400权重 */
}

• 可在Firefox开发者工具的「网络」标签中搜索Ubuntu-Regular.ttf，确认文件是否成功加载；若未加载，检查文件路径是否与实际存储结构一致。

2. 强制覆盖Angular Material默认字体 #

Angular Material默认使用Roboto字体，组件样式优先级可能高于全局body设置，需强制覆盖：

/* 全局覆盖所有元素及Material组件字体 */
body, html,
.mat-typography,
.mat-button, .mat-raised-button,
.mat-form-field, .mat-input-element,
.mat-card, .mat-card-title,
* {
  font-family: 'ubuntu', sans-serif !important;
}

也可通过Material主题配置全局替换排版：
在主题文件（如src/styles.scss）中添加：

@use '@angular/material' as mat;

// 自定义Ubuntu排版配置
$ubuntu-typography: mat.define-typography-config(
  $font-family: 'ubuntu, sans-serif'
);

// 应用排版到Material核心
@include mat.core($ubuntu-typography);

// 定义主题并应用排版
$primary: mat.define-palette(mat.$indigo-palette);
$accent: mat.define-palette(mat.$pink-palette);
$warn: mat.define-palette(mat.$red-palette);

$theme: mat.define-light-theme((
  color: (primary: $primary, accent: $accent, warn: $warn),
  typography: $ubuntu-typography
));

@include mat.all-component-themes($theme);

3. 检查Firefox字体渲染设置 #

Firefox的字体强制设置可能导致自定义字体失效：

• 打开Firefox设置 → 常规 → 字体和颜色 → 高级
• 确保「允许页面选择显示字体代替默认字体」选项处于勾选状态，若之前未勾选，勾选后强制刷新页面（Ctrl+Shift+R）。

4. 清除缓存重启服务 #

Angular开发服务缓存可能导致资源未更新：

• 执行ng serve --no-cache重启开发服务
• 同时清除Firefox浏览器缓存（Ctrl+Shift+Delete），再强制刷新页面。

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