古都で働く、プリングルズ大好き似非システム管理者が、お仕事関係の備忘録を書いたり、日々のあれこれを書いたり。
[PR]
×
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
忍者ブログで日本語Webフォントを使う
M+ WEB FONTSは、フリーに使用可能な、数少ない日本語対応のWEBフォントだ。今回はこのブログにM+ WEB FONTSを導入してみる。
※10月24日より、フォント指定を変更したため、M+ WEB FONTSは使用していない。
WEBフォントの使い方には２通りある。１つは、フォントファイルを自分でアップロードし、それをウェブページ内でリンクして使用する方法。もう１つは、既にウェブ上に準備されているファイルをインクルードして使用する方法。ちょうど、jQueryを自分でアップロードして使用するのと、google apiなどからインクルードして使うのとに似ている。理想としては、既に持っているフォントファイルをwebへアップして使えると良いのだが、大体の場合それはライセンス上許諾されないはずだ。そこで、ライセンス上も安心して利用可能な、既に公開されているWEBフォントをインクルードする事にする。
ちなみに、英語フォントであれば、Googleをはじめ多くのサイトが、フリーに利用可能なWebフォントを公開している。英語の他、多くの記号もWebフォントとして公開されているので、ちょっとした記号をわざわざ画像として作りアップするくらいなら、Webフォントを利用した方が軽量化が図れる場合もあるかもしれない。
M+ WEB FONTSは、M+ FONTSが試験的に公開しているWebフォントで、そのサイト上にはM+ OUTLINE FONTSのTESTFLIGHT 052をWebフォントとして公開されている、と書いてある。M+ OUTLINE FONTSの、TESTFLIGHT 052をダウンロードしてReadMeを読むと「かな文字と常用漢字、基本的な欧文グリフが揃い」とあるので、それ以外の文字では表示が違ってくる可能性があるが、通常使用の範囲ではほぼ問題はないかと思う。
では実際にWebフォントを使用するための設定を行っていく。
M+ WEB FONTSをWeb上で利用できるようにするための設定については、M+ WEB FONTSサイトにも詳しく書かれているので、基本的にはその説明に従って記述を追加していけばよい。
忍者ブログのテンプレート編集を開き、まずはhtmlの編集フォームにWebフォントをインクルードするためのcssをリンクする。このcssファイルは内容を自分で書いてアップロードしても良いが、M+ WEB FONTSにも用意されているので、ここでは直接そこへリンクしてしまう。
という一行を、htmlのheadセクションへ追加しよう。うちのブログの場合であれば、<link rel="stylesheet" type="text/css" href="http://mplus-fonts.sourceforge.jp/webfonts/mplus_webfonts.css" />
<link rel="stylesheet" href="http://<!--$g_user_id-->/css/" type="text/css" />という記述があるので、そこに
<!--[if IE 9]><link rel="stylesheet" href="http://bfile.shinobi.jp/6452/webstyle02_2c_ie9.css"><![endif]-->
<link rel="stylesheet" href="http://<!--$g_user_id-->/css/" type="text/css" />のように追記した。<!-- include M+ Web FONTS -->という記述はコメントなので、特に書かなくても影響はないが、後からソースを見てわかりやすいように書いている。
<!-- include M+ Web FONTS -->
<link rel="stylesheet" type="text/css" href="http://mplus-fonts.sourceforge.jp/webfonts/mplus_webfonts.css" />
<!--[if IE 9]><link rel="stylesheet" href="http://bfile.shinobi.jp/6452/webstyle02_2c_ie9.css"><![endif]-->
上記のリンクを貼る事で、M+ WEB FONTS上のフォントを利用する事が可能になる。
http://mplus-fonts.sourceforge.jp/webfonts/mplus_webfonts.cssの中身を見てみると、
@font-face
{
font-family: mplus-1p-regular;
src: url('http://mplus-fonts.sourceforge.jp/webfonts/mplus-1p-regular.ttf') format("truetype");
}
といった具合にfont faceが記述されているので、後はfont-family:の部分を各タグのスタイルとして設定すればよい。cssの方のfont familyの記述を探して、"MS ゴシック"などになっている記述を書き換えていこう。
例えば、ページ全体のフォントの基本設定を行うならば、bodyタグのスタイルとして
bodyのように記述をすればよい。忍者ブログのテンプレートでは既にbodyの記述があるはずなので、既存のbodyのスタイルを書き換えるなり追記するなりすればよいはずだ。
{
font-family: mplus-1p-regular;
}
Windows7 上のFirefox32でこのブログを表示させてみたものを、キャプチャして比較してみた。まずは
font-family: Arial, Helvetica, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;の場合。
続いて、
font-family: mplus-1p-regular;の場合。
また、mplus-1p-regularを設定した状態でfedora20上のFirefox31でもスクリーンショットを撮ってみた。
違うOS間でも同じフォントが使用できるので、改行される位置が同じになっている。
実際には常用漢字以外が表示できないなど制限もあるので、他のフォントと併用する必要があるだろう。また、よりきれいな表示を目指すならば、アンチエイリアスが効くフォントを優先して指定した方がよい。その辺りはWeb上に多くの考察があるので、それらを参考にfont familyの指定を考えるとよいだろう。
ちなみに、この記事を書いた現在は、M+ WEB FONTSを指定した状態にしている。もしfont familyの指定を変更したら、その時はまた追記する予定。
10月24日よりフォント指定を変更したので、現在はM+ WEB FONTSは使用していない。
PR