こうしたウェブサイトを作る時、文字の色、大きさだけではなく、書体も指定する事ができます。
昔は“<font face="○○○○">”というタグでやっていましたが、今は“font-family:"○○○○"”というスタイルシートでやるのを推奨としています。
……いますが。実際のところ「この指定そのものはあんまりやらない方がイイ」というのが正直なところです。
理由は簡単です。たとえどんな指定をしても、そのウェブサイトを『見る人の』パソコンに「○○○○」という書体がインストールされていなければ意味がないからです。
異なるＯＳ間ではもちろんの事、(特に)業務用アプリケーションをインストールするとセットで勝手にインストールされるフォントもあるし。どんなフォントが入っているかなんてのは、人それぞれ違います。
じゃあこんなタグやスタイルシートに意味なんてないじゃないか。そう思われる方もいらっしゃるに違いありません。
それなら、どっちにもあるフォントを指定すればいいじゃないか。そんなアイデアを思いつく方がいらっしゃるでしょう。
……そんなのがあれば苦労はない。それが正解です。
代表的なＯＳであるWINDOWSとMacintoshで比較すると、どっちにもあるフォント――厳密にはＯＳのみをインストールした段階でフォントフォルダーに入っている物――が存在しないんです。冗談抜きで。
もっともWINDOWS XP以降やMacOS Xにもなると、欧文フォントになら共通して入っている物も増えてきますが、和文フォントまではさすがに。
Microsoft OfficeやInternet Explorerの最新版がインストールされている(した事がある)という条件付きならば『どっちにも入っているフォント』の数はそこそこ増えます。
なので、そのフォントを使えばまだマシにはなります。あくまで「マシ」レベルでしかありませんが。
それに異なるＯＳ間を考慮するならば、WINDOWS用とMacintosh用、双方のフォントを指定しなければならない。
そんな時は“<font face="○○○○,×××,■■■■">”とか“font-family:"○○○○,×××,■■■■"”のように「,(カンマ)」でフォント名を区切ればいくらでも指定できます。一番左に書かれた物が優先されるという仕組みになってます。
そりゃフォントが違う訳ですから、同じ明朝系を並べてみたとしたって受けるイメージはどうしても異なります。それが嫌ならＰＤＦファイルを使ったダウンロード小説にでもするしかないでしょう。
なお、あくまでも「優先」なので、出たり出なかったりするケースも往々にして発生。むぅ。
そもそも、この指定の時にフォントの名前を正確に書かねばならないのが大変な点である。アルファベットの大文字小文字。全角半角。スペースの全角半角を間違えると作動しません。
WINDOWSの「ＭＳ 明朝」というフォントの場合、『MS明朝』『ms明朝』『ＭＳ明朝』『ＭＳ 明朝』ではダメであり、Macintoshの「Osaka」というフォントの場合、『osaka』『Ｏｓａｋａ』『Ｏsaka』『大阪』ではダメという事になります。
でもってＭＳ 明朝などのようにスペースが書体名に含まれる場合、'ＭＳ 明朝'とか"ＭＳ 明朝"のようにクォーテーションで書体名をくくっておかないと正常に作動しません。これもちょいと面倒。
異なるＯＳはともかく、同ＯＳであればおそらく入っているであろう和文フォントを並べるとこうなります。フォント指定の時はこれをコピー＆ペーストすれば、多分大丈夫……な筈。MacOS Ｘ
ヒラギノ角ゴ Pro W3 → "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro"
ヒラギノ角ゴ Pro W6 → "ヒラギノ角ゴ Pro W6" , "HiraKakuPro-W6"
ヒラギノ角ゴ Std W8 → "ヒラギノ角ゴ Std W8" , "Hiragino Kaku Gothic Std"
ヒラギノ丸ゴ Pro W4 → "ヒラギノ丸ゴ Pro W4" , "Hiragino Maru Gothic Pro"
ヒラギノ明朝 Pro W3 → "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro"
ヒラギノ明朝 Pro W6→ "ヒラギノ明朝 Pro W6" , "HiraMinPro-W6"
Osaka → Osaka
Osaka−等幅 → Osaka−等幅 , Osaka-MonoMacOS ９
平成明朝 W3 → "平成明朝 W3" , HeiseiMin-W3
Osaka → Osaka
Osaka−等幅 → Osaka−等幅 , Osaka-MonoWINDOWS
MS UI Gothic → "MS UI Gothic"
ＭＳ Ｐゴシック → "ＭＳ Ｐゴシック" , "MS PGothic"
ＭＳ ゴシック → "ＭＳ ゴシック" , "MS Gothic"
ＭＳ Ｐ明朝 → "ＭＳ Ｐ明朝" , "MS PMincho"
ＭＳ 明朝 → "ＭＳ 明朝" , "MS Mincho"
メイリオ → メイリオ , Meiryo ※WINDOWS VISTA以降のみ面倒ついでにもう１つ言っておけば、ブラウザによってかなり「クセ」があり、書体名が正しくても作動しないケースが判明しております。
管理人所持のMacintosh用ブラウザでの検証でございますが、フォントの名前を「英語で書かなきゃダメ」「どっちでもＯＫ」「日本語で書かなきゃダメ」と３タイプあるんですよ、これが(-_-;)。上のフォントの説明で日本語と英語と両方書いたのはそれが理由。
バージョンが違うと多少の例外も出ますが、基本的にSafari・iCab・OmniWeb・Sunrise・Stainlessは「英語で書かなきゃダメ」。
Firefoxは「どっちでもＯＫ」。
SeaMonkey・Flock・Camino・Operaは「日本語で書かなきゃダメ」。
この中でiCab・OmniWeb・Camino以外はWINDOWS版もありますが、多分結果は同じだと思います。ちなみにWINDOWSのInternet Explorerは「どっちでもＯＫ」でした。
なのでOperaだと「ＭＳ 明朝」でＯＫですがSafariだと「MS Mincho」じゃないと作動してくれない＝どのブラウザでも大丈夫にするには和欧両方書かないとダメというトラップがあります。
※お使いのブラウザで確認をされたい場合はこちらをクリック。
この時点で「やってられっかー！」と思っている人もきっと多いだろうと思います。でももっと簡単な指定の方法がない訳ではありません。ある事はあるんです。
それは５種類の「キーワード」で指定するという方法。そのキーワードと意味合いはこんな感じ。
serif……明朝系のフォントを表示させる。
sans-serif……ゴシック系のフォントを表示させる。
cursive……筆記体・草書体のフォントを表示させる。
fantasy……装飾的なフォントを表示させる。
monospace……等幅のフォントを表示させる。
こんなのがあるなら始めから言え、とお怒りになる方がいるかもしれませんが、全く問題がない訳ではありません。
これはブラウザやパソコンの設定が総ての鍵を握ります。なので明朝系のserifにゴシック系のフォントが設定されてたらゴシック系で表示されてしまうという事。やった事あるから間違いありません。
ですが、このうちcursiveとfantasyは条件に当てはまる物が広すぎ・個人のセンス差が大きいので、使わない方が無難と思われます。
明朝・ゴシックは一般的に判ってもらえると思いますが『等幅とは何じゃい？』という疑問を持つ方のために解説。
アルファベットはその字によって横幅が異なります。なので普通に並べると字間がスッカスカになったりくっついて重なったりします。そうならないように均等な幅で並ぶようデザインされたフォントの事です。WINDOWSでは「ＭＳ 明朝」「ＭＳ ゴシック」Macintoshでは「Osaka−等幅」などがそれに当たります。
元々このキーワードは「フォント名での指定がどれも無効だった場合の最終手段に使う」と定義されているので、これ単独での指定はやっても大丈夫だけどできればフォント名も指定しようと覚えておいて下さい。
……こんな具合に、このフォントの指定って「色々できるんだけど対応具合がメチャメチャバラバラ」なんだよね。スタイルシート指定はもちろん、各種ブラウザももちっと対応できるように、統一するようにしてくれないと困りますわ。
まぁそれでも当サイトは「ベースは明朝系。強調する所はゴシック系」で表示されるよう設定をしてあります。本文が明朝でやるとネット上だとあまり見やすくないのですが、その方がゴシックを使った強調が目立つんで、あえてそうしてます。