我正在使用Fabric JS开发一个大型自定义应用程序,我已经做得很好。但是我对使用 webfont 的 init 加载文本对象有问题。
只要该字体在客户端计算机上是本地的,我就可以正常工作,否则不会加载 webfont,并且画布上的文本对象以默认的无衬线字体系列呈现。
简而言之,这是我所做的(在本例中,我使用"allstar"作为我的网络字体):
CSS: css 加载在字体内部.css在 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 标签中),它可以正常工作。但我不认为这是一种正确的编码方式。
我使用织物.js版本 1.3.0
问题:
- 画布立即渲染
- 谷歌加载网络字体
- 画布不知道,直到下一个重新呈现它的事件
解决方案:
- 画布立即渲染
- 谷歌加载带有回调的网络字体
- 强制渲染
- 画布现在具有
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();
});
})();
短途:
<script src="//ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js"></script>
<script>
WebFont.load({
google: {
families: [ 'Abel', 'Aclonica']
},
fontinactive: function(familyName, fvd) {
console.log("Sorry " + familyName + " font family can't be loaded at the moment. Retry later.");
},
active: function() {
// do some stuff with font
$('#stuff').attr('style', "font-family:'Abel'");
var text = new fabric.Text("Text Here", {
left: 200,
top: 30,
fontFamily: 'Abel',
fill: '#000',
fontSize: 60
});
canvas.add(text);
}
});
</script>
路漫漫其修远兮 网络字体何时加载,您可以预加载它们吗?
有关 Web 字体加载器 https://github.com/typekit/webfontloader 的更多信息。
面料.js特定 https://groups.google.com/forum/#!topic/fabricjs/sV_9xanu6Bg
使用fabric.js和Google Web Fonts,以下代码对我有用:
小提琴:http://jsfiddle.net/DanBrown180/vvL6f/
.CSS
<Style>
@font-face {
font-family: 'Jolly Lodger';
font-style: normal;
font-weight: 400;
src: local('Jolly Lodger'), local('JollyLodger'),
url(http://themes.googleusercontent.com/static/fonts/jollylodger/v1/RX8HnkBgaEKQSHQyP9itiaRDOzjiPcYnFooOUGCOsRk.woff) format('woff');
}
<style>
爪哇语
<script type = "text/javascript">
canvas = new fabric.Canvas('c');
var text = new fabric.Text("Web Font Example", {
left: 200,
top: 30,
fontFamily: 'Jolly Lodger',
fill: '#000',
fontSize: 60
});
canvas.add(text);
</script>
.HTML
<canvas id="c" height="200px" width="400px"></canvas>
看起来这是因为Google Web Fonts css代码使用:
src: local('Jolly Lodger'), local('JollyLodger')
在 CSS 中
我遇到了同样的问题。触发某些事件后,字体正确呈现。.因此,在创建对象后,我们可以将其设置为活动状态:
var textSample = new fabric.Text(text, {
fontFamily: "allstar",
});
canvas.add(textSample);
canvas.setActiveObject(textSample); // Selects the object
canvas.renderAll();
最好的方法是使用 setTimeout();
setTimeout(function(){
var activeObject = canvas.getActiveObject();
activeObject.set({
fontFamily: font,
useNative: true
});
canvas.renderAll();},500);
检查 jsfiddle
http://jsfiddle.net/muthupandiant/x3ptsgex/1/
截至 2017 年,在 Firefox 的 Fabric.js 中可以轻松使用 Web 字体。
您只需通过@import
(在您的样式表中)或通过<link href="...">
(在<head>
中)包含它们。之后,您可以使用织物选择所需的任何字体。文本的属性"字体系列"。
关于您的初始问题,调用canvas.renderAll();
应该重新绘制画布,从而正确显示所有加载的 Web 字体。
请参阅jsFiddle上的简单示例。