Webフォントに使う@font-faceが、ローカルHTMLをローカルフォントで表示するのにも使えました。シンボリックリンクと組み合わせて、フォントのインストール不要でポータブルな簡易見本帳になります。動作はWindows7 32bit + Chrome43、Firefox40で確認しました。
Contents


参考リンク

Mozillaのぺージは@font-faceの解説。「実験段階の機能」とある通りOSやブラウザによっては今回の方法が使えません。Wikipediaのページはシンボリックリンクを含む解説で、HTMLのサンプルテキストもここから。Ricty Diminishedは次々項の実例に使ったフォントで、7書体あります。


HTMLひな形
...
<style>
@font-face {
    font-family: "hoge";
    src: url("HTMLがアクセス可能なローカルフォントのパス");
}
.fuga {
    font-family: hoge;
}
</style>
<body>
<div class="fuga">フォント見本に使う任意の文字列</div>
</body>
...

上のとおり「@font-faceでローカルフォントを任意のファミリ名に紐付け」するのが基本。src属性でローカルフォントの場所を指定します。重要なのはその場所にローカルHTMLがアクセスできる（そこにあるファイルを読み込める）ことで、詳細は次項の実例で説明します。ともかくfont-faceを適切に設定できたら、後は普通のfont-familyと同じ。上ではfugaというクラスに当該フォントを使ってます。


実例
最初にテスト用フォントの準備。参考リンクに書いたRicty Diminishedのページに7書体入りのZIPがあったので、ダウンロードして適当な場所（ここではR:/Ricty）に解凍しました。


次にHTMLを、フォントとは別の場所（ここではR:/TMP）に適当な名前で、下の内容で作成。
test_local_fonts.htmlSelectRawtextBitbucket
<!DOCTYPE html><html><head>
<meta charset="UTF-8">
<style>
@font-face {
    font-family: "f1";
    src: url("Ricty/RictyDiminished-Bold.ttf");
}

@font-face {
    font-family: "f2";
    src: url("Ricty/RictyDiminished-BoldOblique.ttf");
}

@font-face {
    font-family: "f3";
    src: url("Ricty/RictyDiminishedDiscord-Bold.ttf");
}

@font-face {
    font-family: "f4";
    src: url("Ricty/RictyDiminishedDiscord-BoldOblique.ttf");
}

@font-face {
    font-family: "f5";
    src: url("Ricty/RictyDiminishedDiscord-Oblique.ttf");
}

@font-face {
    font-family: "f6";
    src: url("Ricty/RictyDiminishedDiscord-Regular.ttf");
}

@font-face {
    font-family: "f7";
    src: url("Ricty/RictyDiminished-Oblique.ttf");
}

@font-face {
    font-family: "f8";
    src: url("Ricty/RictyDiminished-Regular.ttf");
}

body {
    font-size: 16pt;
    line-height: 1.3;
    padding: 10px;
}

.f1 { font-family: f1 }
.f2 { font-family: f2 }
.f3 { font-family: f3 }
.f4 { font-family: f4 }
.f5 { font-family: f5 }
.f6 { font-family: f6 }
.f7 { font-family: f7 }
</style>
</head><body>
<div class="f1">Windows 2000で採用されたNTFS 3.0以降では、</div>
<div class="f2">ファイルシステムにリパースポイントという機</div>
<div class="f3">能が追加され、これによってジャンクションが、</div>
<div class="f4">さらにWindows Vista以降ではシンボリックリ</div>
<div class="f5">ンクが利用可能になった。ジャンクションはフ</div>
<div class="f6">ォルダ（またはドライブ）へのソフトリンクで</div>
<div class="f7">あり、宛先が書…【Wikipedia ソフトリンク】</div>
</body></html>

このHTMLでは、フォントの場所を相対パス「Ricty/...」で指定。HTMLと同じ場所にRictyというフォルダがあってそこにフォントが入っている仮定になります。

実際そういう状態にしてもいいけど、フォントの移動またはコピーが面倒で、HTMLも自由に動かせなくなるのでシンボリックリンクを使います。HTMLの場所をカレントとしてコマンドプロンプトを開き、Rictyという名前のシンボリックリンクを、フォントが実際ある場所をターゲットにして作成。↓
# mklink /d [作成するシンボリックリンク名] [ターゲットのパス]

mklink /d Ricty "R:/Ricty"
Ricty <<===>> R:/Ricty のシンボリック リンクが作成されました

これで見かけ上、HTMLの下位フォルダにフォントが存在することになり、それらのファイルをHTMLが読み込めるので結果的にローカルフォントも使えます。↓Chrome43（上）、Firefox40（下）での結果。ブラウザによっては別途ローカルファイルへのアクセス許可を与える等の設定が必要かも。（Chrome起動時の--allow-file-access-from-filesオプションは、自分の環境では不要でした）


@font-faceのsrc属性に指定するパスはスラッシュ区切りでよく、半角空白や日本語があってもそのままで使えました（日本語の場合、HTMLの文字コードはUTF-8でOK）。ただし環境によっては違うかも。


ChromeとFirefoxでのフォント確認
実際に表示されているフォントを、どちらもInspect Elementメニュー（いわゆる開発者ツール）から確認できます。↓Chrome43（上）、Firefox40（下）での表示。ただChromeだと細かいフォント名は出ないらしく、例えばRicty Diminished Bold ObliqueはRicty Diminishedとだけ表示されました。


シンボリックリンクとショートカットの区別
先ほどmklinkコマンドでシンボリックリンクを作りましたが、エクスプローラ上のアイコンがショートカットと同じで間違いやすいので、区別する方法をメモ。詳細表示では ↓ サイズが出るのがショートカット、出ないのがシンボリックリンク。


またそれぞれのプロパティで「ショートカット」のタブを開くと ↓ 種類・場所・リンク先が出てリンク先を編集できるのがショートカット、それらが表示されないのがシンボリックリンク。


これでWindows標準の化石的なフォントビューは無用
インストール済か否かに関係なく、フォントファイルをダブルクリックするとWindows標準のfontview.exeが起動して ↓ のような書体見本が出ますが、複数フォント表示や文字列変更ができず化石的な使いづらさ。別途フォント管理ソフトウェアを入れてる人も多いと思います。


今回のローカルHTMLによる簡易見本帳は、複数フォント配置、文字サイズ、文章を自由に設定でき、ブラウザから印刷可能（場合によってはPDF化も）。CSSは既存のをコピペしてちょっと直せばいいし。シンボリックリンクとHTMLを一緒に運べば、どこに置いても同じフォント見本帳として機能します。

あとFirefoxでアドオンAuto Reloadを使えば、HTMLを編集し上書きするのと同時に自動リロードされて結果を即表示。これでフォントレンダリングが綺麗に、せめてChrome並になれば最高なんだけど…。