バタンキュー

Web制作の現場から・・ただいま少し一休み中

※当ページを閲覧される場合は、Windows7以上、Internet Explorer11などの安全でできるだけ最新の閲覧環境でアクセスされることを推奨いたします。
※タブレット端末などのブラウザーで横幅640px以下の画面解像度で閲覧される場合は、レイアウトが崩れて正しく表示されない可能性がありますのでご了承ください。


フォント指定はどれが正解?

カテゴリー:技術的なところ
最近ではCSS3の普及と各ブラウザーの対応のおかげで、コンテンツのテキストデータに、Webフォントなる技術が使用されるWebサイトも増えてきましたね〜。この“Webフォント”、PCにインストールされていないフォントでも表示ができるという素晴らしいアイデアと設計のもと、実用化されるようになった技術ですが、まだまだハードルが高いところも無きにしも非ずな感じ。

参考:WEBフォントサイトまとめ9選!とりあえず一度使ってみませんか? by LIG


現実的には、WindowsやMacにデフォルトでインストールされているフォントを調査して「コレやっ!」ていう指定方法をいろいろと模索することになる場合の方が多し・・・

参照:CSSでのフォント指定について考える(2014年) by DTP Transit

参照:CSSのfont-family指定に関する考察 2014年版 by 6666666 BLOG

参照:CSSのフォント指定見直した by Border/memo

皆さま努力されております。ご苦労様でございます。私もかなり以前、まだWindows7が出始めの頃に、コアフォントのことや、Win98/XPとMac OS9/Xで共通使用可能なフォントを調べたことがあります。なぜWin98/XPとOS9/Xかというと、<新しいOSには旧バージョンのスタンダードは踏襲されてるやろう>という手前勝手な推測のもと、調査した結果が以下のとおりです。これ以外にも、いやぁ、もっと使えるフォントあるんちゃうん?と思われたり、思いたいものもあったんですが、実はそやつらはOS独自のものやったり、Officeとか、何らかのアプリケーションをインストールした際に一緒にインストールされたものという結論に至ったのでした。

○Serif(セリフ)系
MS P明朝 >>> abcdefg...xyz ***¥¥¥:::;;; 0123456789
Times New Roman >>> abcdefg...xyz ***¥¥¥:::;;; 0123456789
Georgia >>> abcdefg...xyz ***¥¥¥:::;;; 0123456789
Symbol >>> abcdefg...xyz ***¥¥¥:::;;; 0123456789

○Sans Serif(サンセリフ)系
MS Pゴシック >>> abcdefg...xyz ***¥¥¥:::;;; 0123456789
Arial >>> abcdefg...xyz ***¥¥¥:::;;; 0123456789
Arial Black >>> abcdefg...xyz ***¥¥¥:::;;; 0123456789
Verdana >>> abcdefg...xyz ***¥¥¥:::;;; 0123456789
Trebuchet MS >>> abcdefg...xyz ***¥¥¥:::;;; 0123456789
Courier New >>> abcdefg...xyz ***¥¥¥:::;;; 0123456789
Impact >>> abcdefg...xyz ***¥¥¥:::;;; 0123456789
Comic Sans MS >>> abcdefg...xyz ***¥¥¥:::;;; 0123456789

○Other(その他)
Webdings >>> abcdefg...xyz ***¥¥¥:::;;; 0123456789


↓↓↓多分、IEではこう見えるはず(画像です)↓↓↓

WinとMacで使用可なフォント

※当然のごとく、Macでは日本語のMS明朝とMSゴシックはデフォルトでは入ってませんので×です。
※Georgiaは、Win98では×でした。
※Symbolは、OS Xでは×でした。
※Trebuchet MSは、Win98では×でした。
※Impactは、なぜかWinXPでは×です。

そして時は流れ、Firefoxとか他のブラウザーの最新バージョンだと、『Symbol』『Arial Black』『Webdings』が、そのフォントで正しく表示されないようです・・・とほほ。
0
     | 技術的なところ | | | pookmark

    スポンサーサイト

    カテゴリー:-
    0
       | - | | | pookmark
      コメント欄
      コメントする


      ※メールアドレスは公開されません

      ※Name:欄に入力したお名前にリンクが設定されます




      この記事のトラックバックURL
      http://stressful.jugem.jp/trackback/24
      トラックバック

      Button of Go to Home

      Button of Back to Top