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