按需加载字体

Question

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

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

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

我可以使用 typekit、google 字体或任何其他服务来实现吗？

Answer 1

有趣的问题 -- 我只是在 GIT 上四处看看，发现了一个 WebFont 加载器 JS，它看起来可以解决您的问题。它有很好的文档记录，可以提供一个很好的解决方案。看这里：https://github.com/typekit/webfontloader

Answer 2

很简单。你只需要用 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)

按需加载字体

Load fonts on demand

fonts

loading

google-font-api

typekit