Angular 12 更新让我的字体看起来不一样了答案

【问题标题】：Angular 12 Update has made my fonts look differentAngular 12 更新让我的字体看起来不一样了
【发布时间】：2021-10-07 23:38:54
【问题描述】：

我的应用程序以前在 Angular 10 上。我升级到 Angular 11 没有任何问题 - 然后立即转到 Angular 12。一切编译正常，应用程序运行良好。我遇到的唯一问题是我的字体现在不同了。

不同——我的意思是我使用的“Open Sans”谷歌网络字体——更轻，不像以前那样粗体。我可以将我的应用程序的生产版本（Angular 10）放在我的本地版本（Angular 12）旁边——并检查这些元素，它们看起来是一样的。他们都在使用字体并很好地加载字体——主要区别在于字体粗细。我的 Angular 10 版本的字体更加大胆。我可以将 Angular 12 字体粗细设置为 900，但它仍然不如以前的常规粗细粗体。我根本没有改变字体。它仍然是相同的导入。

我正在使用 Bootstrap 和 Angular Material（版本 12）。我正在使用自定义排版：

$custom-typography: mat.define-typography-config(
  $font-family: 'Open Sans, sans-serif',
  $display-4: mat.define-typography-level(112px, 112px, 300),
  $display-3: mat.define-typography-level(56px, 56px, 400),
  $display-2: mat.define-typography-level(45px, 48px, 400),
  $display-1: mat.define-typography-level(34px, 40px, 400),
  $headline: mat.define-typography-level(24px, 32px, 400),
  $title: mat.define-typography-level(20px, 32px, 500),
  $subheading-2: mat.define-typography-level(16px, 28px, 400),
  $subheading-1: mat.define-typography-level(15px, 24px, 400),
  $body-2: mat.define-typography-level(14px, 24px, 500),
  $body-1: mat.define-typography-level(14px, 20px, 400),
  $caption: mat.define-typography-level(12px, 20px, 400),
  $button: mat.define-typography-level(14px, 14px, 500),
  $input: mat.define-typography-level(inherit, 1.125, 400),
);

@include mat.typography-hierarchy($custom-typography);

// Override typography for a specific Angular Material components.
@include mat.checkbox-typography($custom-typography);

// Override typography for all Angular Material, including mat-base-typography and all components.
@include mat.all-component-typographies($custom-typography);

@include mat.core($custom-typography);

除了升级过程中自动迁移的语法之外，上面的代码没有改变。我可以检查页面上的各种元素，并且所有字体粗细看起来都是错误的——即使页面背后的代码是相同的。

下面是一个小比较。 LEFT 是 Angular 10 上的当前产品——而 RIGHT 是 Angular 12 上当前的本地产品。这是一个非常微妙的字体粗细问题，我无法弄清楚。有什么帮助吗？

【问题讨论】：

标签： javascript angular sass fonts angular-material

【解决方案1】：

因此，对于其他偶然发现此问题并遇到类似问题的人--

我通过使用较新的 API 导入最新版本的 Google Web 字体解决了这个问题。自从我导入这个字体已经两年多了，他们已经更新了它的工作方式。当我将导入更改为另外包含所有权重时，它又开始工作了。在旧版本中，您不必这样做：

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap');

【讨论】：