ためしタイプ (TameshiType)
このJavaScriptライブラリは、フォント配信サイト向けに設計された、ブラウザ上で動くフォントビューアです。HTML(またはPHP等の)ファイルから呼び出すことで、Webブラウザからサーバー上のフォントを試用するためのテキストエリアを表示します。
また、オフライン環境でもフォントファイルをインストールせずに試用することができるフォントビューアも同梱しています。
なお、このソフトウェアは著作権放棄済み(パブリックドメイン)であり、どなたでも無料で利用することができます。
ダウンロード
Vectorからダウンロード(推奨)当サイトからダウンロード
使い方
インストール方法
テキストエリアを設置するHTMLファイルがあるフォルダに、解凍した「tameshitype」フォルダをコピーしてください。次に、フォントファイル(複数可)をそのHTMLファイルと同じ階層かそれより下の階層にコピーします。
続いて、以下のscriptタグをそのHTMLファイルの適当な位置に挿入します。
<script src="tameshitype/main.js" type="text/javascript"></script>
最後に、上記のscriptタグより後に、次のJavaScript関数を呼び出します。
tameshitype_show(filenames,descriptions,default_style,sample_text)
filenames ： フォントファイルのパス(HTMLファイルから見た相対パス)。複数の場合は配列で指定。
descriptions ： フォントファイルのスタイルの説明("Thin"、"太字"など)。filenamesが複数の場合は配列にして同じ数だけ指定。
default_style(省略可) ： デフォルトのフォントを示す数値。ここに指定した数値の番目にfilenamesに指定したフォントがデフォルトで表示されます。
sample_text(省略可) ： デフォルトのサンプルのテキスト。省略時は「The quick brown fox jumps over the lazy dog」が表示されます。
例：
<script type="text/javascript">
filenames = ["example1.otf","example2.otf","example3.otf"];
descriptions = ["Thin","Medium","Bold"];
tameshitype_show(filenames,descriptions,1,"試しに適当な文字を入力してみてください");
</script>
//この例の場合、ページを開くと、example2.otfのフォント(表示名：Medium)で「試しに適当な文字を入力してみてください」と表示されます。
仕様
本ライブラリは、フォントファイルをwebフォントとしてブラウザに一時的にダウンロードさせることで動作しています。インターネットから不特定多数がアクセス可能なサーバー上で公開する場合は、以下の事項を留意してください。
- 多くの漢字を含む日本語フォントなど、ファイルサイズが1MB以上になるような大きなフォントファイルには適しません。
- ライセンス上でwebフォントとしての利用が禁止されているフォントファイルには使用しないでください。
- htaccessファイルなどでフォントファイルへのアクセスをブロックしないでください。
フォントビューア
HTMLファイル「フォントビューア.html」と同じフォルダに試用したいフォントファイルを「test.otf」というファイル名で置き、「フォントビューア.html」をブラウザ(ChromeまたはFireFox)で開いてください。ブラウザ上でフォントを試用することができます。