こんな感じで
IE8 は vml なので対象外です。 とりあえず今は他に思い付きませんが、canvas でできる事ならできそうです。 貼り付ける単位で表現を別にする為に、データ内の kirieji を kirieji2 に 変更しています 関連する記事 日本語の .ttf をそのまま変換した大きな typeface.js の内容から必要な 文字だけを抜き取るツールを作りました( 現在は 切り絵字のみ )
一番最後にオプションを指定できるようにしました
<script src="http://winofsql.sakura.ne.jp/typeface/load_typeface.js"></script>
<script type="text/javascript">
if (_typeface_js && _typeface_js.loadFace) _typeface_js.loadFace({"glyphs":{"な":{"x_min":211.59375,"x_max":1150.171875,"ha":1389,"o":"m 695 -75 l 522 -21 q 470 105 492 40 l 530 221 l 820 326 l 861 533 l 929 573 q 999 267 967 421 l 1150 141 l 1150 130 l 1123 73 l 1101 73 l 967 89 l 866 -18 l 695 -75 m 793 54 l 793 59 l 815 155 l 698 191 l 598 161 q 571 94 579 130 l 595 46 l 695 18 l 793 54 m 279 259 l 219 280 l 219 286 l 322 625 l 217 714 l 211 785 l 391 845 l 486 1006 l 568 1025 l 573 944 l 565 854 l 682 831 l 684 760 q 287 259 408 581 l 279 259 m 1117 674 l 896 758 l 896 766 l 923 820 l 931 820 l 1147 741 l 1147 733 l 1117 674 "},"感":{"x_min":138.34375,"x_max":1250.546875,"ha":1389,"o":"m 535 -78 l 410 27 l 410 92 l 419 245 l 489 286 q 508 119 519 210 l 505 78 q 815 13 633 -21 l 896 54 l 923 103 l 931 103 l 986 92 l 986 56 l 980 -2 l 836 -78 l 535 -78 m 241 -21 l 179 10 l 179 18 l 244 204 l 330 231 l 330 223 q 244 -21 311 89 l 241 -21 m 1155 24 l 1037 174 q 1093 210 1063 196 l 1212 70 l 1155 24 m 717 105 l 619 226 l 674 261 l 771 146 l 717 105 m 758 321 l 714 378 q 812 557 769 465 l 698 804 q 370 826 533 817 q 200 345 268 590 l 192 345 l 138 375 l 138 383 q 282 892 168 646 q 845 1074 595 911 q 885 963 872 1022 l 975 957 l 975 963 l 953 1009 q 1013 1044 980 1036 l 1090 1000 l 1095 954 l 1196 935 l 1196 927 l 1163 878 l 937 820 l 937 782 l 945 671 l 950 671 q 1123 760 1013 771 l 1123 752 q 1044 522 1095 633 l 1106 435 l 1120 435 l 1158 451 l 1180 492 l 1190 495 l 1250 470 l 1250 446 l 1245 378 l 1114 326 q 920 383 1018 359 l 758 321 m 427 389 l 373 424 l 373 432 l 419 600 l 657 606 l 671 459 q 427 389 543 435 m 600 497 l 600 568 l 473 568 l 473 497 l 600 497 m 402 722 l 402 774 l 665 774 l 665 722 l 402 722 "},"じ":{"x_min":385.015625,"x_max":1104.0625,"ha":1389,"o":"m 741 -21 l 470 48 q 391 465 400 248 q 478 968 359 741 l 481 968 l 505 842 l 505 473 l 503 364 l 560 124 l 755 84 l 1068 210 l 1104 143 q 741 -21 923 56 m 885 747 l 763 826 l 763 836 l 790 870 l 798 870 l 920 790 l 920 785 q 885 747 904 763 m 991 859 l 863 941 l 863 949 l 891 981 l 899 981 l 1021 897 l 991 859 "},"ん":{"x_min":214.296875,"x_max":1201.71875,"ha":1389,"o":"m 855 -10 l 687 132 l 636 335 q 538 394 590 370 q 238 86 341 283 l 233 86 l 214 210 q 712 952 394 638 l 712 944 q 535 571 638 752 q 703 473 609 497 q 796 153 769 321 l 874 86 q 1131 413 1063 196 l 1139 413 l 1201 381 l 1201 370 l 1079 86 l 855 -10 "},"こ":{"x_min":287.546875,"x_max":1029.453125,"ha":1389,"o":"m 600 37 q 333 141 446 62 l 287 253 l 314 362 l 320 362 l 391 351 q 432 180 386 253 q 1029 122 725 124 l 1029 51 l 600 37 m 470 801 l 470 876 l 910 876 l 910 801 l 470 801 "},"で":{"x_min":260.421875,"x_max":1169.15625,"ha":1389,"o":"m 937 -8 l 625 105 q 508 419 560 261 l 541 693 l 260 717 l 260 722 l 320 798 l 991 881 l 1112 828 l 1112 823 q 693 625 877 785 l 600 391 l 693 185 l 967 65 l 967 59 l 937 -8 m 1034 446 l 910 527 l 910 533 l 937 565 l 948 565 l 1066 481 l 1037 446 l 1034 446 m 1133 571 l 1013 649 l 1013 657 l 1047 690 l 1169 606 q 1133 571 1155 584 "}},"cssFontWeight":"normal","ascender":1194,"underlinePosition":-96,"cssFontStyle":"normal","boundingBox":{"yMin":-165.46875,"xMin":0,"yMax":1120,"xMax":1318.359375},"resolution":1000,"original_font_information":{"postscript_name":"kirieji2","version_string":"Version 1.00","vendor_url":"","full_font_name":"kirieji2","font_family_name":"kirieji2","copyright":"fub","description":"","trademark":"kirieji2","designer":"","designer_url":"","unique_font_identifier":"kirieji2","license_url":"","license_description":"","manufacturer_name":"","font_sub_family_name":"Regular"},"descender":-196,"familyName":"kirieji2","lineHeight":1389,"underlineThickness":48,custom_option:{shadowBlur:10,shadowOffsetX:10,shadowOffsetY:10,shadowColor:"#C0C0C0"}});
</script>
<div style='height:200px;line-height:110px;margin:30px 0 30px 0;'>
<span class="typeface-js" style='font-family: kirieji2;font-size:100px;'>こんな感じで</span>
</div>
http://toolbox.winofsql.jp/tool_html_links.htm で貼り付けてテストできます
|
|
【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 フォントを適用させる
- 日本語の .ttf をそのまま変換した大きな typeface.js の内容から必要な文字だけを抜き取るツールを作りました( 現在は 切り絵字/水面字/モフ字/青柳隷書しも )
- typeface.js(0.15)で、Operaが正しく動作しない理由
- 自作デザインフォントによる、typeface.js での表示テスト
