我的应用程序使用了很多自定义的webfonts,并在将iText添加到我的画布时启动它们：
- var text = new fabric.IText("My Text",{
- fontFamily: "Some Custom Font Family",fontSize: 50,top: 0,left: 0,fill: "#000000"
- });
- canvas.add(text);
- canvas.bringToFront(text);
- canvas.setActiveObject(text);
- canvas.renderAll();
这是有效的,但只有当我点击我的画布上的iText和它进行交互.然后,一旦字体加载,它不再是问题了.问题最初是第一次添加iText.
我研究了很多,并提出了这一点：
Init loaded text with remote web font in Fabric.js
但这没有帮助我.提供的jsfiddle有完全相同的问题：
只需使用清除缓存的新鲜浏览器(例如Chrome CMD Shift R)打开此小提琴.你会看到一旦你打开小提琴,自定义webfont没有加载,但立即加载,当你点击右侧的iText.
现在我们该怎么解决呢？
一个建议的方法是将useNative设置为false,并让Cufon呈现文本,但这不起作用.
我将我的webfonts加载到CSS文件中,如下所示：
- @font-face {
- font-family: 'ApolloASM';
- src: url('ApolloASM-webfont.eot');
- src: url('ApolloASM-webfont.eot?#iefix') format('embedded-opentype'),url('ApolloASM-webfont.woff2') format('woff2'),url('ApolloASM-webfont.woff') format('woff'),url('ApolloASM-webfont.ttf') format('truetype'),url('ApolloASM-webfont.svg#apollo_asmregular') format('svg');
- font-weight: normal;
- font-style: normal;
- }
解决方法
>声明你的webfont
在样式表中添加一个@ font-face语句.只需确保它已加载到< head>部分.让我们用你的例子：
- @font-face {
- font-family: 'ApolloASM';
- src: url('ApolloASM-webfont.eot');
- src: url('ApolloASM-webfont.eot?#iefix') format('embedded-opentype'),url('ApolloASM-webfont.svg#apollo_asmregular') format('svg');
- font-weight: normal;
- font-style: normal;
- }
奖励提示：如果您在应用程序中使用斜体和/或粗体,如果您希望在不同浏览器中保持一致的结果,建议您为这些样式添加字体.例如,Android Browser 4.2无法计算字体的斜体,并将正常显示.
强制字体文件的请求
如上所述,您将需要实际使用DOM中的字体来强制加载字体.只需添加一些文字,并用您的字体进行样式化就足够了
- <div style="font-family:'ApolloASM'"> </div>
>在DOM加载事件之后初始化FabricJS Canvas
您将需要在浏览器加载字体后同步canvas init(或至少是文本添加),否则可能会看到FOUT效果(Flash的Unstyled Text).幸运的是,浏览器不会触发加载事件,直到所有的字体文件被加载,这可以用来安全地添加一个风格的文本到画布：
- window.addEventListener('load',function onLoad() {
- var canvas = new Fabric.Canvas({...});
- var text = new fabric.Text("Web Font Example",{
- left: 200,top: 30,fontFamily: 'ApolloASM',fill: '#000',fontSize: 60
- });
- canvas.add(text);
- canvas.renderAll();
- })
奖金提示：您可以将这些字体< div>‘包含在另一个中,并在DOM加载事件之后将其删除,以避免破坏您可能拥有的任何布局.
