Fabric.js 字体系列不适用于触摸设备

Question

下面提到的代码在 Window 7 种浏览器上运行良好，但未更改触摸设备浏览器中的字体系列。

<script type="text/javascript">

function ConvertIntoSignature()//
{
var FirstName = $('#<%= txtFirstName.ClientID %>').val();//
var SecondName = $('#<%= txtLastName.ClientID %>').val();//

if (FirstName != '' || SecondName != '') {
var text = '';
text = FirstName + ' ' + SecondName;
// I am using 4 canvas for this purpose.

var can = new fabric.Canvas("myCanvas");
// This is the fabric code
// Its working for window 7 browsers. But not on any touch devices

var txt = new fabric.Text(text, {
fontFamily: 'Brush Script MT'
});
can.add(txt);

}
}

    </script>

Answer 1

我使用过外部字体系列。

例子

<head>
<style>
@font-face {
    font-family: myFirstFont;
    src: url(sansation_light.woff);
}

div {
    font-family: myFirstFont;
}
</style>
</head>
<body>

<div>With CSS3, websites can finally use fonts other than the pre selected "web-safe" fonts.</div>

<p><b>Note:</b> Internet Explorer 8 and earlier, do not support the @font-face rule with the WOFF format (only support for EOT format).</p>

</body>

对于外部字体系列使用此 link http://fontsforweb.com。

就我而言，只需使用

var txt = new fabric.Text(text, {
fontFamily: myFirstFont
});

Answer 2

如果字体已经加载但仍未更新 fontFamily 则使用此技巧。

再次将文本重新分配给文本属性并渲染

 var obj =  this.canvas.getActiveObject();
 obj.set('fontFamily','Arial');
 obj.text = obj.text;  
 this.canvas.renderAll();

如果上述方法不起作用，则将一些字符串连接到文本并呈现，然后删除该字符串并再次呈现。

 var obj =  this.canvas.getActiveObject();
 obj.set('fontFamily','Arial');
 obj.text = obj.text+" ";  
 this.canvas.renderAll();  
 obj.text = obj.text;  
 this.canvas.renderAll();

注意：这解决了我在应用时不更改 fontFamily 的问题。

Fabric.js 字体系列不适用于触摸设备

Fabric.js Font Family not working on touch devices

fabricjs