Fabric.js + Google字体

Ser*_*rov 2 javascript html5 fonts canvas fabricjs

是否可以将Fabric.js与Web字体一起使用,而无需附加Cufon库及其字体?我可以使用标准的画布功能轻松完成它,所以我想知道它是否可以在Fabric中使用.

kan*_*gax 6

我们计划尽快放弃Cufon,转而采用原生文本方法.我们在大约2年前收集了Cufon,当时原生文本方法不是非常跨浏览器可用(从后面看我的测试).一旦我们放弃它,它可能是一个可选模块,适用于老客户端兼容性很重要的情况.


muT*_*hie 6

首先链接google字体中的 <head>

<link href='http://fonts.googleapis.com/css?family=Oswald|Lobster|Fontdiner+Swanky|Crafty+Girls|Pacifico|Satisfy|Gloria+Hallelujah|Bangers|Audiowide|Sacramento' rel='stylesheet' type='text/css'>
Run Code Online (Sandbox Code Playgroud)

创建一个 div/span

<span class="txtFont" style="font-family:Oswald" onclick="change_font_family('Oswald')">Oswald</span>
Run Code Online (Sandbox Code Playgroud)

在 JavaScript 中

function change_font_family(font_family)
{
   canvas.getActiveObject().set("fontFamily", font_family);
   canvas.renderAll();
}
Run Code Online (Sandbox Code Playgroud)

  • @AamirNakhwa 是的,您可以通过将使用的字体添加到 svg 文件 `&lt;style xmlns="http://www.w3.org/2000/svg" type="text/css"&gt; @import url( 'https://fonts.googleapis.com/css?family=Charmonman&amp;display=swap'); &lt;/style&gt; &lt;svg xmlns="http://www.w3.org/2000/svg"........ &lt;/svg&gt; ` (2认同)