Question

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

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

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

我可以使用typekit，google fonts或任何其他服务来实现这一目标吗？

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)

Answer 2

有趣的问题 - 我只是在寻找GIT并遇到一个WebFont加载器JS，看起来它可能会解决您的问题。它有很好的文档记录，可以提供一个很好的解决方案。见这里：https://github.com/typekit/webfontloader

按需加载字体

2 个答案: