在Fabric.js中使用远程Web字体初始化文本 [英] Init loaded text with remote web font in Fabric.js

问题描述

我正在用Fabric JS开发一个大型的自定义应用程序，而且我已经做得很好了。但我有一个使用webfont的init加载文本对象的问题。只要这个字体在客户端的计算机上是本地的，我工作的很好，否则webfont不会被加载，而canvas上的文本对象被渲染成默认的sans -serif font-family。

简而言之，我在做什么（在这个例子中，我使用allstar作为我的webfont） ：

CSS： 在fabric.js之前，css被加载到fonts.css中

  @ 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 （'truetype'），
 url（'/ path-to-fonts / all_star-webfont.ttf'）格式（'woff'），
 url （'/path-to-fonts/all_star-webfont.svg#allstarregular'）格式（'svg'）; 
 font-weight：normal; 
 font-style：normal 
} 
  

这是加载在$（document）.ready（function（）{}）中的页面底部。

   var textSample = new fabric.Text（text，{
 fontFamily：allstar，
}）; 
 canvas.add（textSample）; 
 canvas.renderAll（）; 
  

如果我在页面的其他地方使用字体（例如：字体加载），它工作正常。但我不认为这是一个正确的方式来编码。

我使用fabric.js版本1.3.0

$ b

1. Canvas立即呈现


> Google加载网页字体

3. 在下一个重新呈现它的事件之前，画布不知道是什么
   

解决方案：
$ b

1. Canvas立即呈现


2. Google使用回调加载网页字体


3. 您强制呈现


4. 画布现在有
   

http://jsfiddle.net/vvL6f/6/

  WebFontConfig = {
 google：{family：['Ribeye :: latin'，'Lora :: latin'，'Croissant + One :: latin'，'Emblema +拉丁语，拉丁语研究生，哈默史密斯+拉丁语，奥斯瓦德拉丁语，氧拉丁语，克朗+拉丁语，独立+ ：拉丁文'，'西葫芦::拉丁文' ，'Ranchers :: latin']} 
}; 
 
（function（）{
 var src =（'https：'=== document.location.protocol？'https'：'http'）+ 
'：/ /ajax.googleapis.com/ajax/libs/webfont/1/webfont.js'; 
 
 $ .getScript（src，function（data）{
 //不知道为什么我需要运行这两次，但它使它加载的字体，然后重新定位到正确的坐标字体
 canvas.renderAll（）; 
 canvas.renderAll（）; 
}）; 
}）（）; 
  

I'm working on a big custom application with Fabric JS and I already did a great job. But I have a problem with init loaded text object that uses a webfont.

As long as that font is local on the client's computer, I works fine, ELSE the webfont is NOT loaded and the text object on the canvas is rendered in a default sans-serif font-family.

Here is, in short, what I do (in this example I use "allstar" as my webfont):

CSS: The css is loaded inside fonts.css in the head before 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: this is loaded at the bottom of the page inside $(document).ready(function(){})

var textSample = new fabric.Text(text, {
    fontFamily: "allstar",
});
canvas.add(textSample);
canvas.renderAll();

If I use the font elsewhere on the page (e.g.: in a transparent span tag with a dot and the font loaded), it works fine. But I don't think that's a proper way to code.

I Use fabric.js version 1.3.0

解决方案

The issue:

1. Canvas renders immediately
2. Google loads webfonts
3. Canvas has no idea until the next event that re renders it

The solution:

1. Canvas renders immediately
2. Google loads webfonts with a callback
3. You force render
4. Canvas now has the

http://jsfiddle.net/vvL6f/6/

WebFontConfig = {
    google: { families: [ 'Ribeye::latin', 'Lora::latin', 'Croissant+One::latin', 'Emblema+One::latin', 'Graduate::latin', 'Hammersmith+One::latin', 'Oswald::latin', 'Oxygen::latin', 'Krona+One::latin', 'Indie+Flower::latin', 'Courgette::latin', 'Ranchers::latin' ] }
};

(function() {
    var src = ('https:' === document.location.protocol ? 'https' : 'http') +
        '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';

    $.getScript(src, function(data) {      
        // Not sure why I need to run this twice but it makes it load the font and then reposition the font to it's correct coords.
        canvas.renderAll();
        canvas.renderAll();
    });
})();

这篇关于在Fabric.js中使用远程Web字体初始化文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！