普通にページデザインを行って表示する場合、表示できるフォントは各閲覧ユーザの端末にインストールされているフォントに依存することになる。
当然ながらインストールされていないフォントファミリを指定しても、よくて見た目の近い書体が選ばれて表示される。 悪ければ幅やバリ(セリフ)の有無など見た目の異なるフォントが選ばれてデザインが崩れることになる。
もちろん@wikiも同様の事情があるので、ワープロモードなどで選択できるフォントは、具体的な書体名ではなく、特徴のグループ名となっていることにお気づきだろうか。
このページでは、そんな事情を打開すべく、ページ記述者の意図通りのフォント表示を行う方法を紹介する。
…といってもやってみたことのメモなので、多少の手間や誤解は目をつむることにする。
いきなりのネタバラしになるが、方法はCSSとWeb Open Font Format：WOFF を採用して実現する。
もちろん副作用なしの万能薬ということはなく、メリット、デメリットが存在する。
おおまかな流れは以下のとおり。
まず、WOFF形式のフォントが参照できるようにする必要がある。
すでにGoogle Fontsなどの利用を考えているのであればこのステップはスキップ可能。
（筆者はこの方法はまだ試していないのであしからず。。。）
TTFやOTFなど、ローカルにインストールするタイプのフォントをWOFFに変換する。
いくつかのほうほうがある。
WOFFコンバータ
・WOFFコンバータ紹介ページ＠武蔵システム
http://opentype.jp/woffconv.htm
・Vectorによるレビューページ
http://www.forest.impress.co.jp/library/software/woffconvert/
FontForge
・FontForge
・unofficial FontForge(cygwin)
Webフォントに限らず、外部参照とするファイルは同じドメインに置いたほうが安全といわれる。
それもあって、@wikiで使用できるようにするため、ページへのファイル添付を行う。
このステップもまた、Google Fontsなどの外部サービスを使う場合はスキップ可能。
＠wikiでは、「wikiにファイルをアップロード」を選ぶことで、特殊なディレクトリにアップロードされるらしい。
共通に使うようなファイルを置くのに都合がよい。
デフォルトでは/pubというフォルダに置かれるようだが、今回はあとのことも考えて、その下に「font」というディレクトリを作ってそこにアップロードした。
ウィキにファイルをアップロードしたら、今度はスタイルシートで参照を定義する。
@font-face {
font-family: (参照時のフォント名);
src: url( アップロードしたWOFFファイルへのフルパス );
}つづいて、記事の記述中に適用するためのclassを定義。
.myfont{
font-family:(参照時のフォント名);
}縦書きフォントの場合、このclass定義のところで縦書き指示を行えばよい。
.myfont{
font-family:(参照時のフォント名);
writing-mode: tb-rl;
-webkit-writing-mode:vertical-rl;
}ここまで準備すれば、あとは本文中で使用するのみである。
今回classで指定できるようにしたので、編集モードは@wikiモードがオススメである。
というか筆者はこのモードでしか試していない。。。
@wikiモードの書式で、部分的な範囲を対象にclassを指定するためのプラグインを用いて、書式設定を行っていく。
面倒でも１行ずつ指定するらしい。面倒なら後述のブロック指定をつかう。
&spanclass(myfont){縦書きのときはブロック要素にしたほうが安全。
#divclass(myfont){ここのテキストに対して反映される}
こんな感じで表示できる。
このページに記載したやり方は、スタイルシートの改変を含むので、安易に行うとデザインを崩してしまう可能性があるので注意されたい。
あとはGoogle Fontsなど外部サービスも使えるか、そのうち試してみよう。
未来の自分含み、誰かの役にたちますように。
