【Raphael.js】Rapahel上で好きなフォントを使えるようにする方法
好きなフォントを使うには？
前回はprint関数でテキストを描画する方法を学びました。
【Raphael.js】print関数で文字を描画する - RAPHAELIST
しかし、まだ気になる点があります。どのようにして、インストールされていないフォントをRaphael側で処理しているのか！？ここが最大の疑問だったはずです。
フォントをjavascript化
実は、フォントをjavascriptに変身させ、そのファイルを読み込む事でそのフォントが使用可能になっているのです。「え？変換？それってめんどくさいね？」と思うかもしれませんが、実はかなり簡単です。
まずはRaphael.js上で使用したいフォントをダウンロードします。その後、上記サイトにアクセスしてください。
- (上段)Select the font you'd like to use にダウンロードしたフォントを指定
- (上段)The EULAs of these fonts allow Web Embedding (without Adobe Flash)にチェック
- (中段)Include the following glyphs の Basic Latin をチェック
- (下段)Customization に Raphael.registerFont を指定(Raphaelアイコンをクリック)
- (下段)I acknowledge and accept these terms をチェック
- Let's do This !
すると、ダウンロードが始まります。javascript化はこれで完了。ユーザー登録も不要でいい感じですねえ！
ダウンロードしたjsを読み込み
あとはこれを適当に読み込みましょう。
<script type="text/javascript" src='font.js' ></script>
getFont関数
これでようやくお気に入りのフォントデータを我が物にできました。次に、ダウンロードしたjavascriptからフォントデータを取り出すにはgetFont関数を使います。もし、フォントの名前がよく分からない場合はダウンロードしたjavascriptをメモ帳で開いてみましょう。
Raphael.registerFont({"w":192,"face":{"font-family":"Destroyed Aero","font-weight":400,"font-stretch":"normal"....
ながーい文字列の先頭にこのような記述があると思います。font-familyの後に書かれているのが使用できるフォント名です。指定できるスタイルやストレッチなどもこの中に定義されていますので、確認してみるのもアリアリアリアリ！アリーヴェデルチ！(サヨナラだ) ﾄﾞｼｬｱｧｱｧ
Paper.getFont( font-family, weight, style, stretch);
- Paper: Raphael関数で指定した描画エリア
- font-family: cufonで変換したフォント名
- weight: (省略可)フォントの太さ
- style: (省略可)フォントの装飾
- stretch: (省略可)フォントの割り付け
- 返り値: 指定フォントのフォントオブジェクト
実行結果
【Raphael.js】print関数で文字を描画する - RAPHAELISTと同じサンプルになりますが、今回の記事を踏まえたうえで、今一度確認してみてください。
