在 JS 执行之前应用 CSS 字体

Question

我正在构建在 HTML 主体之上使用画布表面的 Web 应用程序。我使用画布在 SPAN 周围绘制边框。它工作得几乎完美，但我仍然在页面加载时遇到问题。

我使用了 chrome 调试器并注意到 css 文件中的字体样式是在脚本执行后应用的，这会混淆 DOM getElementRects 方法并导致页面完全呈现后跨度边框位置错误。下面我附上截图。

你知道如何解决这个问题吗？我可以等到完全应用 css 样式吗？

Answer 1

字体加载比 css 加载需要更多时间 -> How to be notified once a web font has loaded

Answer 2

Is $(document).ready() also CSS ready?

ready() 方法不再尝试保证等待所有样式表被加载。相反，所有 CSS 文件都应包含在页面上的脚本之前。更多信息

确保您的脚本位于 html 页面的底部。