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

Question

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

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

我面临的问题是,在用户访问aspnet mvc内部网并且他们无法访问互联网的情况下,这导致浏览器继续尝试从googleapis.com大约10秒内下载文件.

我试图在我的服务器中提供这些字体,这样即使用户无法访问互联网,也会为这些文件提供服务.

任何人都可以建议我如何在我的asp.net mvc服务器中添加这些字体,而不是从中检索这些文件googleapis.com？

谢谢

Answer 1

你可以通过JavaScript(我会推荐这种方式)使用WebfontLoader(谷歌字体告诉你使用的相同脚本)来实现.通过它你甚至可以有一个指令试图通过谷歌字体获取字体,如果它无法在x秒内获取文件,使用另一条路径(或做其他事情).

并给予基本的答案,所有你需要做的是开放所有这些googlefonts CSS链接,复制他们的CSS文件和字体文件(.SVG,.woff,.UTF,.TTF和.eot),上传所有这些文件给你的主机并让你的css reffer到你的localhost副本

编辑WebfontLoader优先于CSS @import的
原因

1. CSS位于标题中,因此必须在页面html显示之前加载,JavaScript如果放在HTML的末尾,就在关闭</body>标记之前最后执行
2. @import在性能方面不是很好
3. WebfontLoader 有一个功能,在尝试加载字体时做某事(比如显示另一种字体或什么都不显示)和一个功能,如果找不到该字体(比如尝试从其他来源加载或调用js事件)
4. WebfontLoader可以加载只有一个的某些字符googlefont (如果你想只显示某些字体的页头有用).这样你可以避免badwitdh问题,你的页面更快