我不确定每个浏览器是否有所不同，我主要是为webkit开发。
使用@ font-face来加载用于canvas元素的字体很简单...除了看起来实际的字体文件在第一次使用之前没有加载。
如果我根本不使用HTML中的字体，这会在canvas元素中产生问题，第一次调用自定义字体时会生成默认字体的文本....但是后续尝试使用字体很好，并使用引用的自定义字体，就好像它是由于原始调用而加载。
问题1，这是所有浏览器的标准吗？是否在CSS中声明了下载的字体？或者在第一次使用时？
是否有最佳实践＆＃34;将字体加载到DOM中？这是一个图形项目，我宁愿不在CSS中声明每种字体。我也只想加载将要使用的字体。有没有更好的方法用JavaScript加载字体？
答案 0 :(得分：1)
是的，如果字体有'onload'回调，那就太好了。但在那之前......
...一个常见的选择是使用setTimeout来延迟应用程序的启动，以便为字体加载时间。当然，太小的延迟将无法给出字体加载时间，而延迟太大会导致不必要的延迟。
......更好的选择是Google's webfont loader
...“自己动手”选项是连续将一个字体字符绘制到内存中的画布元素，直到不透明的像素数发生变化。当计数更改时，字体已在内存中的画布上绘制，可供您使用。可以在此Stackoverflow Q&A上找到此技术的示例代码。
答案 1 :(得分：1)
问题1，这是所有浏览器的标准吗？是下载的字体 如果它在CSS中声明？或者在第一次使用时？
字体加载是异步的，这意味着在您使用画布时，字体可能仍在后台加载。对于画布，这个问题会立即显现，因为你第一次画的是最终的。
对于DOM，内容可以在以后更新，但会导致臭名昭着的FOUT和FOIT，或Flash of Unstyled Text和Flash of Invisible Text。但是对于画布，当字体可以使用时，内容需要手动重绘（或搁置，导致客户端不方便的延迟）。
话虽如此 - 具体的浏览器可能会实现不同的加载策略 - 而且，我们并不总是必须知道哪些以及何时，并且它们在任何情况下都必须考虑画布，因此供应商必须遵循类似的策略。
一般来说， "old" problem 并不容易解决，具体取决于您希望支持的浏览器数量。情况不太理想。
有些库可以帮助您解决加载/准备问题（请记住，这些库本身会增加延迟），例如Google提到的 Font Loader 库。您可以通过将CDN用于字体以及在localStorage中存储字体来进一步提高速度。
这些图书馆针对的是那些需要路径和指标信息的人，我会将它们包括在内，以防它们对动态加载字体有用： Font.js 和 {{ 3}}
另请参阅这些文章以获取提示和信息。改进字体加载和解决方法的技巧：
关于可用于画布的字体 - 我在前一段时间确实提供了 Non-blocking web fonts using LocalStorage 中的替代选项，尽管这更像是一种蛮力方法，但具体工作画布。