Fabric.js + Google Fonts

2019-04-01 19:41发布

站内问答 / JavaScript
1504 3 4

Is that possible to use Fabric.js with web fonts, without attaching Cufon library and its fonts? I can easily do it with standard canvas functionality so I wonder if it's possible in Fabric.

3条回答
疯言疯语
2楼-- · 2019-04-01 20:02

We're planning to ditch Cufon soon, in favor of native text methods. We incorporated Cufon ~2 years back when native text methods weren't very cross-browser available (see this test of mine from back in the days). Once we drop it, it will probably be an optional module, for cases when compatibility in older clients is important.

查看更多
0人赞 添加讨论(0) 举报
爷的心禁止访问
3楼-- · 2019-04-01 20:02

First link the google font in the <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'>

Create a div/span

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

In Javascript

function change_font_family(font_family)
{
   canvas.getActiveObject().set("fontFamily", font_family);
   canvas.renderAll();
}
查看更多
0人赞 添加讨论(0) 举报
混吃等死
4楼-- · 2019-04-01 20:22

I had the problem just this time.

You have to load the font in dom before you can use it in canvas with fabric.

So you can create an element, wich has the style attribute with the font you want.

For some my solotion may be interesting. I create a select where the user can select the font. In this select each get the attribute font-family.

Look at this: enter image description here

Why a new answer? Because the key in the store is the font, which was not mentioned directly.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)