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