ドロップシャドウ適用時にエリアを広げるようにしました 青柳隷書しもを追加しました プレビューを可能にしました font-family と ドロップシャドウオプションの入力を追加しました 水面字とモフ字を追加しました
こんな感じで
表示されます
表示されます
以下の画像をクリックすると、処理ページを開きますが、最初のロードで オリジナルのフォントファイルがインターネットからロードされる為、か なり時間( 十数秒 ) かかる場合がありますので注意して下さい。※ 現在、文字選択の都合で句読点や記号類が動作していません。(データ更新しました) ※ 漢字、かたかな、ひらがなは実装しています ※ 半角英数字類は機能していると思います ※ キャッシュにファイルが読み込まれると次からは高速です そのまま貼り付けるだけになってはいますが、他の CSS とのかねあいで、 そのページ用に追加 CSS が必要になって来ると思います。 ※ ここでは、line-height が必要でした理屈はいたって簡単なので、だれでもできますが、typeface.js のサイト へ行って変換は必ず必要になりますし、その時の選択を絞らないとエラー になるのでそこだけが面倒です。 また、実行は localhost で WEBサーバーを置いて実行するのが望ましい のでこれまた少し手間が必要です。慣れた方なら特に問題は無いとは思い ますが、手軽にフリーフォントを WEB フォントライクに使う為に、逐一 動作確認しながらフォントの種類を増やして行く予定です
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<textarea id="my_typeface" style='width:700px;height:600px;' onclick='this.select();'></textarea>
<script type="text/javascript">
var _typeface_js = {
faces: {},
loadFace: function(typefaceData) {
this.faces = typefaceData;
}
}
</script>
<script type="text/javascript" src="kirieji_regular.typeface.js" charset="utf-8"></script>
<script type="text/javascript">
var target = '愛してます';
var prop;
for( prop in _typeface_js.faces.glyphs ) {
if ( target.indexOf( prop.toString() ) >= 0 ) {
}
else {
delete _typeface_js.faces.glyphs[prop];
}
}
document.getElementById("my_typeface").value = 'if (_typeface_js && _typeface_js.loadFace) _typeface_js.loadFace('+JSON.stringify( _typeface_js.faces )+');';
</script>
</body>
</html>
|
|
【Three.js & typefaceの最新記事】
- jQuery + Shadowbox.js + Three.js で『画像を蝶のように飛翔させる』デモ表示
- 別ドメインの画像を『テクスチャ』として使った、Three.js(v65) + WebGL キューブアニメーション
- Three.js( Canvas ) デモコード( 背景画像、前景画像、鳥画像変更可 ) : 200のオブジェクトが舞います。
- Three.js + Shadowbox 飛翔する200人の初音ミク
- 最新のThree.js(2012/04/22-r49)は、IEで動かないバグがあります。それと、CanvasRenderer からLambert で テクスチャの処理が削除されました
- Three.js r48 で JSONLoader が Opera で動作しない原因と対処方法
- Three.js で、Blender から出力したデータ(Three.jsフォーマット)の境界線を消す overdraw の適用のさせかた
- 動的に typeface.js フォントを適用させる
- typeface.js(0.15)で、Operaが正しく動作しない理由
- typeface.js を少し変更して、データに値を追加するとドロップシャドウが実装できるようにしました
- 自作デザインフォントによる、typeface.js での表示テスト
