我正在开发一个使用Fabric JS的大型自定义应用程序,已经完成了很多工作。但是我遇到了一个问题,就是初始化加载文本对象时使用了Web字体。
只要该字体在客户端计算机上是本地的,它就可以正常工作。否则,Web字体将无法加载,画布上的文本对象将以默认的Sans-serif字体族呈现。
以下是我所做的简要说明(在这个例子中,我使用“allstar”作为我的Web字体):
CSS:css在fonts.css中加载,位于head中fabric.js之前。
如果我在页面的其他地方使用这种字体(例如:在一个透明的带有点和已加载字体的span标签中),它可以正常工作。但我认为这不是编码的正确方式。
我使用的是fabric.js版本1.3.0。
只要该字体在客户端计算机上是本地的,它就可以正常工作。否则,Web字体将无法加载,画布上的文本对象将以默认的Sans-serif字体族呈现。
以下是我所做的简要说明(在这个例子中,我使用“allstar”作为我的Web字体):
CSS:css在fonts.css中加载,位于head中fabric.js之前。
@font-face{
font-family:'allstar';
src:
url('/path-to-fonts/all_star-webfont.eot');
src:
url('/path-to-fonts/all_star-webfont.eot?#iefix') format('embedded-opentype'),
url('/path-to-fonts/all_star-webfont.woff') format('woff'),
url('/path-to-fonts/all_star-webfont.ttf') format('truetype'),
url('/path-to-fonts/all_star-webfont.svg#allstarregular') format('svg');
font-weight:normal;
font-style:normal
}
Javascript: 这段代码被加载在页面底部,放在$(document).ready(function(){})函数内。
var textSample = new fabric.Text(text, {
fontFamily: "allstar",
});
canvas.add(textSample);
canvas.renderAll();
如果我在页面的其他地方使用这种字体(例如:在一个透明的带有点和已加载字体的span标签中),它可以正常工作。但我认为这不是编码的正确方式。
我使用的是fabric.js版本1.3.0。