Fabric.js + 谷歌字体答案

【问题标题】：Fabric.js + Google FontsFabric.js + 谷歌字体
【发布时间】：2012-03-10 18:05:39
【问题描述】：

是否可以在不附加 Cufon 库及其字体的情况下将 Fabric.js 与网络字体一起使用？我可以使用标准画布功能轻松做到这一点，所以我想知道在 Fabric 中是否可行。

【问题讨论】：

原生文本渲染现已实现，顺便说一句。

标签： javascript html canvas fonts fabricjs

【解决方案1】：

我们很快就会成为planning to ditch Cufon，支持原生文本方法。我们在大约 2 年前合并了 Cufon，当时本机文本方法还不能很好地跨浏览器使用（请参阅过去的 this test of mine）。一旦我们删除它，它可能会成为一个可选模块，用于旧客户端的兼容性很重要的情况。

【讨论】：

【解决方案2】：

先在<head>链接google字体

<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'>

创建一个 div/span

<span class="txtFont" style="font-family:Oswald" onclick="change_font_family('Oswald')">Oswald</span>

在 Javascript 中

function change_font_family(font_family)
{
   canvas.getActiveObject().set("fontFamily", font_family);
   canvas.renderAll();
}

【讨论】：

它在表单上工作，但是当我们导出 canvas.toSVG() 时，字体没有加载到 svg 中。有什么帮助吗？
这可行，但你能请教如何加载字体的斜体并应用它们
@AamirNakhwa 是的，您可以通过将使用的字体添加到 svg 文件 <style xmlns="http://www.w3.org/2000/svg" type="text/css"> @import url('https://fonts.googleapis.com/css?family=Charmonman&display=swap'); </style> <svg xmlns="http://www.w3.org/2000/svg" ......... </svg> 来简单地做到这一点
感谢您在我必须打开该 svg 到 Illustrator 时的回复，但外部链接无法使用它...

【解决方案3】：

我这次遇到了问题。

您必须在 dom 中加载字体才能在带有织物的画布中使用它。

所以你可以创建一个元素，它有你想要的字体的样式属性。

对于某些人来说，我的独奏可能很有趣。我创建了一个选择，用户可以在其中选择字体。在这个选择每个获取属性font-family。

看看这个：

为什么要有新的答案？因为store中key是字体，没有直接提到。

【讨论】：

当我们通过 canvas.toSVG() 将画布导出为 svg 时，这些字体不起作用。有什么帮助吗？