html - 如何避免为我的 CSS 文件调用 "fonts.googleapis.com/css?family=.."

Question

我正在开发一个 asp.net mvc Intranet web 应用程序，我正在使用一个从 web 下载的 web 布局模板。在我的 CSS 文件中，大多数 CSS 文件的开头都有以下代码行(当然每个 CSS 都有不同的字体系列名称):-

@import url(https://fonts.googleapis.com/css?family=Shojumaru);

我面临的问题是，如果用户访问 aspnet mvc Intranet 而他们无法访问 Internet，这会导致浏览器不断尝试从 googleapis.com< 下载文件 大约 10 秒。

我正在尝试在我的服务器中提供这些字体，这样即使用户无法访问互联网，也可以为他们提供这些文件。

谁能建议我如何在我的 asp.net mvc 服务器中添加这些字体，而不是从 googleapis.com 检索这些文件？

谢谢

Answer 1

您可以通过 JavaScript(我推荐这种方式)使用 WebfontLoader 来完成它(Google 字体告诉您使用的相同脚本)。通过它，您甚至可以有一个指令来尝试通过 Google Fonts 获取字体，如果它无法在 x 秒内获取文件，使用另一条路径(或做其他事情)。

要给出基本答案，您只需打开所有那些 googlefonts CSS 链接，复制它们的 CSS 文件 和字体文件(.svg、.woff、.utf、.ttf 和 .eot) ，将所有这些文件上传到您的主机，并使您的 css 引用到您的本地主机副本

编辑
优先使用 WebfontLoader 而不是 CSS @import

的原因

1. CSS 位于页眉中，因此必须在页面 html 之前加载可以显示，如果将 JavaScript 放在 HTML 的末尾，就在之前关闭 </body>标签最后执行
2. @import 的性能不是很好
3. WebfontLoader具有在尝试加载时做某事的功能一种字体(比如显示另一种字体或什么都不显示)和如果未找到字体，则执行某些操作的功能(例如尝试从其他来源加载或调用 js 事件)
4. WebfontLoader可以只加载googlefont的一些字符(如果您只想显示带有某种字体的页眉，则很有用)。那避免 badwitdh 问题和页面速度更快的方法