フォントセットの自作方法とWebFontというエントリーを書きました。Fontを自作しようという試みを書いたものです。この時はsymbolsetで実現されているようなものには及ばない不完全なものになってしまいました。その後、いろいろと調べたり試したりする中でsymbolset相当のWebFontを自作することが出来ました。今回はそのプロセスと技術的解説について紹介したいと思います。Fontのデモページをご覧ください。FontはOFLライセンスで公開しており、ダウンロードや使用方法も紹介していますので、興味のある方はぜひダウンロードして使ってみてください。ページのトップにはすぐにフォントを試すことができる入力フォームを用意していますのでお試しください。SymbolsはLiagture(合字)という機能を使用して作成しています。合字に関する説明はタイプディレクターとしても有名な小林章さんのブログにわかりやすいエントリーがありますのでご覧ください。合字とは、デザイン上の理由などによって複数の文字を結合して一つの文字記号としてデザインされたもののことを言います。fl」といったアルファベットを結合した合字です。今回の自作フォントではこれを応用して作っており、「twitter」などのような特定な文字列をタイプしたときに特殊な文字記号(Symbol)を表示するようにしています。fl」などの一般的なものは標準の合字です。他にも歴史的な合字や装飾的な合字、今回のような場合に使用する任意の合字といったものがあります。Ligatureも表示されました)。そのため今回はあえて標準的な合字として書き出すことでChromeやSafariといったブラウザでも表示することができるようにしています。Symbolsの作成プロセスについて前回との違いを踏まえながら紹介してみたいと思います。Miniというフォント制作アプリを使用しました。Miniは有料フォント制作アプリとしては非常に安価でアプリケーションとしても優れていたものでした。プロ向けではないぶんできることは限られており、今回のような特殊なケースで使用するにはあまり適さなかったのかもしれません。(けれども今回のフォント作成にあたっては結局使用することになったのですが...)ということで、今回はオープンソースで公開されているFontForge(日本語版)というアプリケーションを使用して作成しました。formatなどへの書き出しやUnicodeの設定、細かなフォント情報の設定ができる非常に優れたアプリケーションです。Mac)FontForgeはMacの場合X11上で起動します。Macを買ったときに付属しているインストールDVDからあらかじめX11をインストールしておいてください。FontForgeのインストールにはHomebrewを使いました。いろんな人がhomebrewを使ったFontforgeのインストールについて書いていますので(Lionでhomebrewを使ってfontforgeをインストールなど)検索して参考にしながら行います。さんに手伝ってもらいながらインストールできました。起動してすぐにファイル選択ウィンドウが立ち上がります。最初は新規作成ですので下部中央にある[New]ボタンを押します。するとメインのウィンドウが表示されるので、アルファベットなどは作成したい文字のマスをダブルクリックするとGlyphの作成ウィンドウが表示されます。Miniで作成したフォントファイルがあるのでそれを用いて作成することにしました。フォントの統合」でフォントファイルを選択してマージすることができます。フォント情報・Ligatureの設定をする次にフォント情報の設定を行います。フォント情報」を選択してください。フォント名やウェイト、バージョン、著作権表示の設定ができます。Ligatureの設定は左のメニュー項目でLookupsを選択してください。私は前回作成したフォントに合字が含まれているため、GSUBに一つ項目が表示されています。Metadata]ボタンを押してください。Substitution」を選択します。次にすぐ下のセルの<New>の横の長方形をクリックして「標準の合字」を選択します。これで[OK]を押して完了です。Subtable]をしておくと後々楽かもしれません。Metadata]を押すとセルにすでにdligというのが入っています。Miniで作成した際に自動的に設定されたものだと思われます。Name」を適当な名前に変更しておきます。LookupにはSubtableというのも付随しているのでついでにそのラベル名も変更しておくと後で間違えなくて良いと思います。Glyphの情報・Unicode・Ligatureの設定をする次に個々のGlyphに対する設定をします。info...」を選択してください。Glyphの設定ウィンドウが表示されるので、まずはGlyphの名前とUnicodeの設定をします。Miniの仕様のためアンダーバーで連結された名前が入っているので、修正します。ユニコードは今回のような私的な目的の場合の文字に対して使う「私用面」(BMPのU+E000〜U+F8FFの領域の拡張)を割り当てるのが適切だと思います。詳しくはWikipediaの説明などを参考にしてください。「私用面」に関してもAdobeなどが予約している領域があるといった情報もありますが、今回は考慮していません。調べる必要がありそうです。次に左のメニュー項目から「合字」を選択して設定します。新規作成の場合は<新しい合字>を押して先ほど設定したsubtableを選択します(ない場合は作成してください)。Namesのところには合字にしたい文字の組み合わせを半角スペース区切りで入力します。love」と複数呼び名がある場合は複数設定しておくと良いかもしれません。フォントを出力」からフォントファイルの書き出しができます。書き出すファイル名を設定する欄の下に「アウトラインフォント無し」と書かれたセレクタがあるのでそこから出力するフォーマットを選択します。Font」を出力しました。以上でFontForgeに関する説明は終わりです。FontForgeの使用方法に関してはまだまだ勉強不足な部分が多いです。実際の使用にあたっては説明不足な部分が多々あるかと思いますが、ご勘弁ください。:-)WebFontとして使用する方法とCSSテクニック前回のエントリーでも紹介しましたが少し違う部分もあるので、もう一度紹介しようと思います。今回InternetExplorerでの表示の確認はしていませんが、念のためIE用のEOTファイルも用意しておこうと思います。ttf2eotというサイトでTruetypeからEOTへの変換ができるので、私はこれを使って用意しました。StyleWebFontの使用にはまず以下のようにCSSを記述して、font-faceを登録しておきます。Symbolを使用したい箇所につけるクラスを記述します。inheritといった値を設定できます。「optimizeLegibility」の場合は、読みやすさを速度や幾何学的な正確さよりも優先するとなっています。Webkit系ではこの時にLigatureが有効となるようです。前回のエントリーで記述していたOpentypeの機能を有効にするプロパティに関しては、任意の合字を使用していないので今回は省いています。classを紹介します。optimizeLegibility;}このコードは「lsf-icon」というクラスをつけた要素の前にアイコンを表示するというものです。:before擬似要素とcontentプロパティを使って文字を追加しています。contentプロパティはtitle属性を読むようにすることですっきりしたCSSにできます。アイコンを文字より少し大きく表示したり、文字との間にマージンを設けるなどのStyleも書いています。Symbolsの特徴と有効性について高解像度化している近年のPC/Mobile環境ですが、それによって解像度のばらつきがWebDesignerの悩みのタネの一つであることは間違いないと思います。多くのディスプレイ環境で画像表現をいかに綺麗に表示するかとともに、セマンティックなWebという流れの波も同時に押し寄せていて、WebDesignerは常にこの問題に悩まされているでしょう。SVGやHTML5のCanvasといったものがこの問題を解決するかとも思われましたが、これらの技術もなかなか実用段階にまで行かないところがあります(Canvasはこの話とちょっと違うかもしれませんね)。Symbolsではこれらの問題をすべて解決してくれる可能性があります。スケーラブルなSymbolフォントを使用することで解像度の問題を、Ligature機能を使うことでよりセマンティックなWebという問題を解決します。いった新技術で懸念されるのはいつもIEというブラウザーの存在ですが、私が前々から言っているように、スマートフォンブラウザという枠に限ればこの問題からも開放されます。これは決して未来の技術ではなくて、今すぐにでも使える現実的な技術だと私は考えます。Symbolsを使ってみて、ご感想や意見などをください。一部環境で表示がうまくいかない件について本日(2012.7.20)公開したLigatureSymbolsにおいて、一部の環境でChromeやSafariでもLigatureが表示できない現象が確認できています。発生条件が不確定なためすぐに対応することはできませんが、原因追求に努めたいと思います。発生した事例や条件などが分かった方などがいましたら、どんな情報でもご連絡いただけると嬉しいです。Blog|ブログを報告する。