TypefaceというWebFontを使って、タイプフェイスでアイコンを表示する方法について紹介しました。fontには感心しました。Webfontには、それを使用する際の表現としてあまり適切でない部分がありました。アルファベットの「t」などに直接アイコンを割り当てていたため、code上では意味を成さない(コンピュータに理解できない)文字が並ぶことになってしまいました。そのため私が使用するときは、HTMLでは意味のあるの文字列(Twitterなど)を記し、CSSの:before擬似要素でcontentプロパティに任意の文字(tなど)を入れて挿入するという方法なら良しとしてきました。この方法も完全に適切であるとは思えませんでした。symbolsetではこれをligature(合字)を使って表現する事で解決していて素晴らしいなと感じました。日本人にはあまりligatureに馴染みがないので、発想しにくい方法だったかもしれません。Fontを作成しました。その作成手順などについて書こうと思います。フォントについてはまだまだ勉強不足ですし、フォント制作についてはど素人なので少々誤りもあるかもしれませんが、そのときはコメントなどで教えていただけると助かります。Illustratorで使ってみた動画です。v10.7.4を使用しています。Mac用のフォント制作アプリはいくつかあります。有名なところではFontographerでしょうか。Fontographerを含めて数万円単位の高いソフトということもあってフォント制作には踏みきれず躊躇していましたが、Glyphsという良さげなソフトがAppStoreにあるのを見つけました。Miniというのが¥3,900でインストールできます。わたしのようにフォントに関してプロではないけど、ちょっとフォントを作ってみたりしてみたいという方にはちょうど良さそうです。Glyphsのサイトにはトライアル版もあるようです。日本語Documentがものすごく少なくて皆無に近いです。GlyphsのサイトにはPDFのマニュアル(English)があるのでそれを読みながらちょっとずつ勉強している感じです。Miniにコピペして字間調整などの微調整をするという事をしました。Fontを作るのが目的ではありますが、Ligatureを使って表現するということもあってアルファベットや数字、記号も最低限作成しました。一晩でざっと作ったので適当な感じが否めませんが...。(時間があるときにでもアルファベットとかもきちんと整えられたらと思います。)編集ページでは、試しにタイプしてみて並びを見ながら字間を調整するということもできるようです。一部動画でプロセスを紹介してみようと思います。LigatureのタイプLigatureはタイプのラベルを「_」アンダースコアで連結した文字列で書くことで作成することができます。[+]で新しいタイプを作成して、そこのラベルをtwitterなら「t_w_i_t_t_e_r」といった具合に書き換えます。その時点で自動的にLigatureの項目欄に振り分けられます。あとはアルファベットや数字を作成したときと同じようにAIからパスデータをコピペして、字間調整などをして完了です。フォントを書き出す左上の[i]ボタンを押すとフォントの情報を編集することができます。フォント名や制作者名、バージョン、weightといった情報を入力できます。Exportで書き出すことができます。Bookに読み込んでから、試しにAIなどで使ってみると良いと思います。WebFontとして使うここまで作ることができたら当然WebFontとして使いたいというものです。MiniではWebFont系のフォーマットの書き出しがどうにもできそうになかったので、OTFで書き出して変換しました。変換にはWOFFコンバータというアプリを使用しました。これはOpenTypeフォントやTrueTypeフォントをWOFFやEOTに変換できるソフトで、無償で提供されています。Converterというサイトで変換しました。WebFontを以下のように読み込みます。3ではOpenTypeのフォント機能を制御できるようになっていて、Liagtureやスモールキャップといった機能をオンオフしたりできます。この辺についてはまだまだ勉強不足です。あと文字列の描画処理の最適化に関するプロパティであるtext-renderingも記入しておきます。Ligatureを使用するために以下をCSSに追加します。ligaturesをオンにしています。これで、準備が整ってブラウザで見れる...はずなのですが、うまくいきませんでした。調べてみると、font-feature-settingsに対応しているのはまだFirefoxぐらいのものでWebkit系のブラウザは対応していないみたいです...。Firefoxでは問題なく表示できました。アルファベットや数字はもちろWebkit系ブラウザでもWebFontになっていましたが。なるとsymbolsetはChromeやSafariでも動作を確認できたのですが、どのようにやっているのかわからないところです。どなたかわかる方がいましたら教えていただけると嬉しいです。.svgとCSSやHTMLの例までいっぺんに書きだしてくれるサイトもあるのですが、ここで変換したところFirefoxでもLigatureは表示されなくなりました。このへんに関しては、もっと詳しい方じゃないとわからないところですね。Miniというソフトでは各々のグリフに手動でUnicodeを設定することはできないようです。symbolsetではCSSの:before擬似クラス・contentプロパティで直接Unicodeを指定して挿入するクラスが用意されています。そのようなことをする場合にはUnicodeの設定が必要となりそうです。Webkit系ブラウザで表示する方法は未だにわかっていません。IllustratorやPhotoshopで使用する場合は、以下のような設定が必要となります。任意の合字」をチェックしてください今はFontForgeというオープンソースのフォント作成プログラムを使って上手くできないかを試しています。Miniでは手動でUnicodeの設定をすることができませんでしたが、FontForgeでは設定することができます。Fontに関してはいろいろと試しながら調べている段階です。2012.10.01FontForgeを使って作る方法がうまくいき、自作方法を新たに書きましたのでどうぞそちらをご覧ください。Blog|ブログを報告する。