POPSブログ

CreateJS @font-face 形式で、Webフォントの描画が壊れる時の修正

316

  Category:  javascript2014/08/07 pops 

CreateJSで@font-face 形式でWebフォントを読み込んだ場合、テキストの装飾を行うと、直接html5 Canvas処理のコンテキストのFontがWebフォントにならない場合があります。CreateJS TextClassの処理は正常なのですが、修正方法を考えて見ます。

 

CreateJS @font-face 形式で、Webフォントの描画が壊れる時の修正テスト

CreateJSを使用しないで、直接JavaScript処理の場合にも、Webフォントが表示されないことがあり(前ページ参照)、修正しましたがそれと症状は同じのようです。其の場合の修正とは違う方法で試行してみました。


 

DEMO


CreateJS @font-face 形式で、Webフォントの描画が壊れる時の修正デモ

このページはHTML5では有りませんので、デモページでご覧ください。「IE7.8」ではご覧いただけません。
/// 注意、ブラウザ、マシン性能により描画品質などに大きな差が有ります事了承下さい ///


CSS3、@font-face 使用のデモ、(不具合表示と修正の実行)


Chrome Opera Firefox Safari(Win) IE9-11で動作確認済み。 Safari(Mac)、は未確認です。


 

HTML JS CSS


掲載しません。

デモは、CreateJS、easeljs-0.7.1、で行いました。


 

簡単な説明


[説明図]

下図の様に、テキストの処理方法によって、壊れ方は色々です。


 

1. @font-face 形式で「Webフォント」を読み込んだ場合に限る。WebFont Loader使用では起こらない。
2. 症状はブラウザによって少々異なるが、コンテキストで直接操作の「Webフォント」はブラウザ全てで旨く表示できない。(Safariでは文字すら表示しない場合もある)
3. リロードすると直る場合があるがブラウザによって異なる。(解決策にはならない)
4. ページの履歴がある場合は、正常に表示される。(Webフォントがキャッシュされているのか)
5. CreateJS TextClassの処理でのWebフォントは正常です。


以外とバラバラな症状であるが、@font-face 形式の読み込みは手軽である。これでは困るので修正方法を考えてみる。(考えてみる程の技量はないし、アタマの中はパチンコ玉で埋まっている。偶然の結果であるが...)


@font-face 形式読み込み

@font-face 形式であり、CanvasでのみのWebフォント表示であるから、下記の様になる。(デモの例)


<style type="text/css">
@font-face{
	font-family:'Nunito';
	src:url('/main/asset/Nunito-Bold.woff') format('woff');
}
	@font-face{ 
font-family:'ChunkFive';
	src:url('/main/asset/Chunkfive.woff') format('woff');
}
@font-face{ 
	font-family:'Limelight';
	src:url('/main/asset/Limelight.woff') format('woff');
}
</style>

CreateJS TextClassの処理

CreateJS TextClassの処理でのWebフォントは正常です。

現在、CreateJS TextClassでは単色で染めれるが、画像またはグラデーション染めは出来ない。


var tx=new createjs.Text("WELCOME","40px ChunkFive","#FF0000");

CreateJSは、正常に表示できるように工夫をいているのだろうナ?、良く判りませんが......


コンテキストを直接操作

コンテキストを直接操作した場合、上図の様にWebフォントは表示されません。コアフォントになってしまいますし壊れて表示する事が多いので大変見苦しい。
最近、テキストの装飾で、下記の様に直接コンテキスト操作での作業が多くなった。

@font-faceでの読み込みに限り、この直接コンテキスト操作部分が壊れる。(図参照)


var canvas=document.createElement("canvas");
canvas.width=640;
canvas.height=80;
var ctx=canvas.getContext("2d");
ctx.font="40px ChunkFive";
ctx.textAlign="center";
ctx.textBaseline="middle";

var pattern=ctx.createPattern(画像,"repeat");
ctx.fillStyle=pattern;
ctx.fillText("WELCOME",320,40);
var img_txt=new createjs.Bitmap(canvas);
.
.


ここの処理のWebフォントが認識されない
ctx.font="40px ChunkFive";

事前のテストの方法次第では、不具合が判らない場合も有り得ますので、履歴など完全に消去しながら確認する。


修正する

前ページの様に、ページの Html に工夫すれば良いのだが、Html記載は結構面倒になるので別の方式で処理する。
但し、CreateJSの場合のみである(他のJSで試した事がない)。ここは直接JSの中で処理する方が手軽である。

前ページの処理、「CreateJS を利用しないで直接JavaScriptでCanvas操作の場合の詳細」参照のこと。

この修正方法は面倒であるから、利用しない。


<div class="Nunito" style="visibility:hidden; height:0;">.</div>
<div class="ChunkFive" style="visibility:hidden; height:0;">.</div>
<div class="Limelight" style="visibility:hidden; height:0;">.</div>

次の様に早めにステージで、Webフォントを表示すれば正常になる。つまりダミーを表示する。

解決するまで、結構いろんなテストを重ね悩んだが、突然解決した。おそらくキャッシュされるのだろう...


var dmy_text=new createjs.Text("E","1px Nunito","#FFFFFF");
stage.addChild(dmy_text);

複数のWebフォントがあるので少し工夫すれば、次の様になる。邪魔なのでステージ欄外に表示する。
Textクラスでの修正は、stage.addChildで一旦表示しなければならない、その後は削除しても良いが、削除し易いようにコンテナに収容した例である。(familysは変数名、PHPではないのでこの辺いい加減)


var dmycontainer;
var familys=["Nunito","ChunkFive","Limelight"];

----------------------------------------------------------------
//ダミーTEXT
dmycontainer=new createjs.Container();
for (var i=0; i < familys.length; i++) {
	var font="1px "+ familys[i];
	var dmy_text=new createjs.Text("E",font,"#FFFFFF");
	dmycontainer.addChild(dmy_text);
}
dmycontainer.x=-20;
stage.addChild(dmycontainer);

コンテキストで処理しても結果は同じであった、この場合は表示の必要はなく、メモリ上での操作になる。

2例、記述するがどちらも結果は同じであった。/// コンテキストで処理のほうが簡単である。///


1、


//ダミーCanvasTEXT
dmytext_draw();

//ダミーテキスト処理
function dmytext_draw() {

	//canvas用
	var canvas=document.createElement("canvas");
	canvas.width=10;
	canvas.height=10;
	var text="E";
	var ctx=[];
	for (var i=0; i < familys.length; i++) {
		ctx[i]=canvas.getContext("2d");
		ctx[i].fillStyle="#FFFFFF";
		ctx[i].font="1px "+ familys[i];
		ctx[i].fillText(text,0,0);
	}
}

2、「デモ」ではこちらを使用した。


dmytext_draw2();

//ダミーテキスト処理2
function dmytext_draw2() {

	//canvas用
	var canvas=document.createElement("canvas");
	canvas.width=10;
	canvas.height=10;
	var text="E";
	for (var i=0; i < familys.length; i++) {
		var ctx=canvas.getContext("2d");
		ctx.fillStyle="#FFFFFF";
		ctx.font="1px "+ familys[i];
		ctx.fillText(text,0,0);
	}
}

コンテキスト2Dは1つだから、どのように処理しても同じのハズ。一応確認のため2通り試した。


「デモ」では一旦不具合を表示して、上記修正方を実行して、正常に「Webフォント」を表示出来るようにしている。
Webフォントは「伊賀者」か「甲賀者」か判りませんが、結構「曲者」である。


 

以上です。

 


[ この記事のURL ]


 

ブログ記事一覧

年別アーカイブ一覧



[1]