我不确定这是否对每个浏览器都不同，我主要是为 webkit 开发的。
使用@font-face 加载用于画布元素的字体很容易...除了它似乎在第一次使用之前没有加载实际的字体文件。
如果我根本不使用 HTML 中的字体，这会在画布元素中产生问题，第一次调用自定义字体时，它会以默认字体生成文本....但是随后尝试使用字体很好，并使用引用的自定义字体，就好像它是因为原始调用而加载的一样。
问题1，这个标准适用于所有浏览器吗？如果在 CSS 中声明，字体会被下载吗？还是第一次使用？
是否有将字体加载到 DOM 的“最佳实践”？这是一个图形项目，我不想在 CSS 中声明所有可能的字体。我也只想加载将要使用的字体。有没有更好的使用 JavaScript 加载字体的方法？
【问题讨论】：
标签： javascript html canvas fonts
是的，如果字体有“onload”回调就好了。但在那之前……
... 一个常见的选项是使用setTimeout 来延迟应用程序的启动，以便给字体加载时间。当然，太小的延迟将无法给字体加载时间，而太大的延迟会导致不必要的延迟。
...更好的选择是Google's webfont loader
... Do-It-Yourself 选项是连续将一个字体字符绘制到内存中的画布元素，直到不透明像素数发生变化。当计数发生变化时，字体已绘制在内存画布上，可供您使用。此技术的示例代码可以在 Stackoverflow Q&A 上找到。
【讨论】：
问题 1，这个标准适用于所有浏览器吗？是下载的字体 如果它在CSS中声明？还是第一次使用？
字体加载是异步的，这意味着在您使用画布时，字体可能仍在后台加载。对于画布，这个问题会立即显现，因为您第一次绘制的是最终的。
对于 DOM，内容可以在以后更新，尽管会导致臭名昭著的 FOUT 和 FOIT，或 Flash Of Unstyled Text 和 Flash Of Invisible Text。但是对于画布，当字体准备好可以使用时，需要手动重绘内容（或搁置导致客户端延迟不便）。
话虽如此 - 特定的浏览器可能会实现不同的加载策略 - 而且，我们不一定总是知道哪个和何时，他们无论如何都必须考虑画布，因此供应商必须遵守类似的策略。
它通常是 "old" problem 并且不容易解决，具体取决于您想要支持的旧浏览器。而且情况不太理想。
有一些库可以帮助您解决加载/准备问题（请记住，这些库本身会增加延迟），例如提到的来自 Google 的 Font Loader 库。您可以通过对字体使用 CDN 并将字体存储在localStorage 中来进一步提高速度。
这些库面向更多需要路径和指标信息的人，我将它们包括在内，以防它们被证明对动态加载字体有用：Font.js 和 OpenType.js。
还可以查看这些文章，了解改进字体加载的提示和技巧以及解决方法：
关于可用于画布的字体 - 我确实在 this answer 中提供了一个替代选项，虽然这更像是一种蛮力方法，但专门用于画布.
【讨论】：