Question

我在main.scss中加载了这样的自定义字体：

@font-face {
  font-family: helvetica-geo-roman;
  src: url(/assets/fonts/helvetica-geo/Linotype-HelveticaNeueLTGEO55Roman.otf) format("opentype");
}

我的angular.json看起来像这样：

    "architect": {
            "build": {
              "builder": "@angular-devkit/build-angular:browser",
              "options": {
                "outputPath": "dist/browser",
                "index": "src/index.html",
                "main": "src/main.ts",
                "polyfills": "src/polyfills.ts",
                "tsConfig": "tsconfig.app.json",
                "aot": true,
                "assets": [
                  "src/assets",
                  "src/favicon.ico"
                ],
                "styles": [
                  "src/styles/main.scss"
                ],
                ...

因此，如您所见，我引导了main.scss文件，因此我认为应该在呈现视图之前加载字体。但是服务器返回的视图中没有字体，并且半秒钟后，浏览器按预期修复并设置了字体，但是闪烁。因此问题在于服务器未加载字体。为什么呢？

Answer 1

服务器端仅负责呈现页面的标记/ html-浏览器仍必须采用此标记并将其呈现给显示。

为了减少首次绘画的时间，浏览器在下载所请求的字体时将使用不同的字体渲染文本，这是可预期的。

您可以做的一件事是指定在加载所需字体时要使用的后备字体，并选择尽可能接近最终字体的字体，以减少过渡的麻烦。

编辑：似乎chrome在下载字体时实际上会将文本呈现为空白，但是Firefox将使用默认字体，您可以在https://developers.google.com/fonts/docs/technical_considerations

中阅读更多内容

Angular Universal在服务器端不加载字体

1 个答案: