导入的字体在 Chrome 中有效，但在 Safari 中无效

Question

我一直在 Chrome 中测试我的网站，并且一切都按预期工作，但我刚刚发现我的字体没有在 Safari 中导入，并且使用了默认字体而不是我应该使用的字体。 我包含了一个片段，显示了我如何导入和使用字体 - 也许我需要以不同的方式访问字体才能让它在两个浏览器中都可用？

 const context = document.querySelector("canvas").getContext("2d"); context.width = document.body.clientWidth; context.height = document.body.clientHeight; context.beginPath(); context.font = "10vw Montserrat"; context.fillStyle = "red"; context.textAlign="center"; context.textBaseline = "middle"; context.fillText("XXXXXX", context.width/2, context.height/2); context.closePath();

 @import url('https://fonts.googleapis.com/css?family=Montserrat:900i&display=swap');

 <canvas class="game"></canvas>

Answer 1

只有在您的 DOM 中实际使用了 webfont 时才会加载它。
您可以在 chromes 开发工具网络选项卡中检查这一点。
（我认为它适用于 Chrome，因为您可能在本地安装了“Montserrat”）。

为确保字体已加载，您可以通过 js FontFace()方法加载它。

工作示例

 const canvas = document.querySelector("canvas"); const context = canvas.getContext("2d"); context.width = document.body.clientWidth; context.height = document.body.clientHeight; let fontUrl = "https://fonts.gstatic.com/s/montserrat/v24/JTUFjIg1_i6t8kCHKm459Wx7xQYXK0vOoz6jqw16WXh0pg.woff2"; let fontFamily = "Montserrat"; let fontOptions = { weight: 900, style: "italic" }; loadFonts(fontFamily, fontUrl, fontOptions); async function loadFonts(fontFamily, fontUrl, fontOptions) { const font = new FontFace(fontFamily, `url(${fontUrl})`); font.weight = fontOptions.weight ? fontOptions.weight : 400; font.style = fontOptions.style ? fontOptions.style : "normal"; // wait for font to be loaded await font.load(); document.fonts.add(font); // apply font styles to canvas canvas.classList.add("fonts-loaded"); canvas.setAttribute( "style", `font-family:${fontFamily}; font-weight:${fontOptions.weight}; font-style:${fontOptions.style}` ); drawText(); } function drawText() { context.font = "48px Montserrat"; context.fontWeight = 900; context.fontStyle = "italic"; context.fillStyle = "red"; context.textAlign = "center"; context.textBaseline = "middle"; context.fillText("Hamburg", 150, 50); }

 canvas { height: 50vh; border: 1px solid red } .fonts-loaded { border: 1px solid green; }

 <canvas class="game" />

1. 我们正在异步函数中加载字体文件
   （只需打开 google 字体 css（例如https://fonts.googleapis.com/css?family=Montserrat:900i ）以获取实际的字体文件 url）
2. 加载字体后，我们通过设置内联样式将所需的字体样式属性应用于canvas元素（您也可以使用类）
3. 现在我们可以在画布上绘制文本