Chrome 如何在CanvasAPI的网页中加载Google字体？[副本]

jvidinwx 于 2023-09-28 发布在 Go

关注(0)|答案(1)|浏览(116)

此问题已在此处有答案：

Unable to use a Google font on Canvas（4个答案）
上个月关门了。
我尝试在CanvasAPI中使用Google字体，但当我这样做时，我需要重新加载页面，以便字体实际显示。我想知道如何使用谷歌字体，而无需重新加载CanvasAPI中的页面。
我把font-family: Rubik作为画布的样式。我也搜索了Google和Stack Overflow，但没有找到答案。

google-chrome

来源：https://stackoverflow.com/questions/76907501/how-do-i-load-google-fonts-in-a-webpage-for-canvasapi

1条答案

按热度按时间

iqjalb3h1#

动态加载字体可能会导致渲染延迟，特别是如果字体文件是异步获取的，因此要解决您的问题，让我们尝试一些步骤：
1.预加载字体：您可以在HTML的<head>部分预加载字体，以确保它们在CanvasAPI开始渲染时可用。

<link rel="preload" href="https://fonts.googleapis.com/css2?family=Rubik&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Rubik&display=swap"></noscript>

1.字体显示：使用CSS中的font-display属性来控制加载时字体的显示方式。例如，swap值显示回退字体，直到加载Google字体，然后将其交换。

@font-face {
  font-family: 'Rubik';
  font-display: swap;
  src: url('https://fonts.googleapis.com/css2?family=Rubik&display=swap');
}

1.使用Web字体加载器：您可以使用它来异步加载Google字体，并在加载字体后执行代码。
首先，在HTML中包含Web Font Loader脚本：

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>

然后，在JavaScript代码中：

WebFont.load({
  google: {
    families: ['Rubik']
  },
  active: function() {
    // Code to manipulate CanvasAPI once fonts are loaded
  }
});

别忘了检查你的网络连接是否太慢！

赞(0）回复(0）举报 2023-09-28

我来回答

Chrome 如何在CanvasAPI的网页中加载Google字体？[副本]

1条答案

相关问题

热门标签

最新问答