我在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文件，因此我认为应该在呈现视图之前加载字体。 但是服务器返回没有字体的视图，半秒后，浏览器按预期修复和设置字体，但我有闪烁。 所以问题是服务器不加载字体。 这是为什么呢？
服务器端只负责呈现页面的标记/html - 浏览器仍然必须获取它并将其呈现到显示器上。
为了尽量减少首次绘制的时间，浏览器将在下载请求的字体时使用不同的字体呈现文本，这是意料之中和可取的。
您可以做的一件事是指定在加载所需字体时使用的回退字体，并选择尽可能接近最终字体的字体，以减少过渡的刺耳感。
编辑：似乎chrome在下载字体时实际上会将文本呈现为空白，但是Firefox将使用默认字体，您可以在此处阅读更多内容 https://developers.google.com/fonts/docs/technical_considerations