如何在 angular ssr 中预加载图标字体？
[英]How to preload icon font in angular ssr?
问题描述
I want to preload icons and fonts before html gets rendered.
我想在 html 被渲染之前预加载图标和 fonts 。 I am using preload strategy to achieve this.我正在使用预加载策略来实现这一点。
index.html索引.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>EbDesktopApp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preload" href="assets/fonts/eb-icons/eb-icons.eot" as="font" type="application/vnd.ms-fontobject" crossorigin="anonymous">
<link rel="preload" href="assets/fonts/eb-icons/eb-icons.ttf" as="font" type="font/ttf" crossorigin="anonymous">
<link rel="preload" href="assets/fonts/eb-icons/eb-icons.woff" as="font" type="font/woff" crossorigin="anonymous">
<link rel="preload" href="assets/fonts/eb-icons/eb-icons.svg" as="font" type="image/svg+xml" crossorigin="anonymous">
<link rel="preload" href="assets/fonts/helvetica-geo/Linotype-HelveticaNeueLTGEO55Roman.otf" as="font" type="font/otf" crossorigin="anonymous">
<link rel="preload" href="assets/fonts/helvetica-geo/Linotype-HelveticaNeueLTGEO65Medium.otf" as="font" type="font/otf" crossorigin="anonymous">
<link rel="preload" href="assets/fonts/helvetica-geo/Linotype-HelveticaNeueLTGEO75Bold.otf" as="font" type="font/otf" crossorigin="anonymous">
<link rel="preload" href="assets/fonts/helvetica-geo/Linotype-HelveticaNeueLTGEO95Black.otf" as="font" type="font/otf" crossorigin="anonymous">
</head>
<body>
<body>
<app-root></app-root>
</body>
</html>
The problem is html starts rendering before icons finish load and also I can't see eb-icons.eot and eb-icons.svg in network tab.问题是 html 在图标完成加载之前开始渲染，而且我在网络选项卡中看不到eb-icons.eot和eb-icons.svg 。
The question is what am I doing wrong and how can I fix this?问题是我做错了什么，我该如何解决这个问题？
1 个解决方案
解决方案1
0 2020-07-03 22:30:56
I am no pro on this subject, but I searched a little on this and it might be related to priority or importance of loading.我不是这个主题的专家，但我对此进行了一些搜索，它可能与加载的优先级或重要性有关。
I would recommend you check this article which deals with font preloading and details on several different options.我建议您查看这篇文章，该文章涉及字体预加载和几个不同选项的详细信息。
Also, you can check more on priorities here .此外，您可以在此处查看有关优先级的更多信息。
I would recommend you check which file formats you really need, that could reduce your file loading.我建议您检查您真正需要的文件格式，这可以减少您的文件加载。 You could use only Woff ( Woff compatibility ) in a combination with TTF ( TTF Compatibility ).您只能将 Woff（ Woff 兼容性）与 TTF（ TTF 兼容性）结合使用。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.