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

Question

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

我所说的不同——我的意思是我使用的 Google Web 字体“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 上的当前本地产品。这是一个非常微妙的字体粗细问题，我无法弄清楚。有帮助吗？

Answer 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');

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

Angular 12 Update has made my fonts look different

javascript

angular

sass

fonts

angular-material