按需加载字体

Question

我的应用程序必须支持许多字体。用户可以从给定的字体列表中选择任何字体。同步或异步加载所有字体没有意义，因为用户可能会使用多种字体之一，这只会浪费带宽。

我有一个带有字体名称的选择框，当用户从选择框中选择字体时，我想加载字体。

使用typekit，我可以将字体划分为单独的工具包，但是如何在javascript事件中加载这些工具包？

我可以使用Typekit，Google字体或其他任何服务来实现此目的吗？

Answer 1

很简单 您只需要使用JavaScript注入相应的CSS规则即可。如果您在外部CSS文件中有字体定义，则可以简单地将<link>标记动态添加到HTML头中。当然，这可以是直接来自Google Fonts或TypeKit的CSS文件。

var link = document.createElement("link")
link.setAttribute("rel", "stylesheet")
link.setAttribute("type", "text/css")
link.setAttribute("href", "http://fonts.googleapis.com/css?family=Indie+Flower")
document.getElementsByTagName("head")[0].appendChild(link)