おもなフォント
今回は JavaScript のプログラムではなく、Web ページ上で使うべきフォントについてまとめてみました。 デバイスに依存しないようにするには M+ WEB FONTS や Google Noto Sans のような Web フォントが望ましいですが、現在のところ無料の日本語フォントは種類があまりありません。 逆に欧文のフォントは豊富にあるようです。ただ欧文の場合、Arial, Trebuchet MS, Verdana, Courier New, Georgia, Times New Roman は Windows, OS X, iOS で共通に使えます。 なお、Office for Mac 2011 をインストールした Mac mini (OS X El Captian) の Safari で下表を見たところ Meiryo UI, MS UI Gothic, Yu (UI) Gothic 以外の全てのフォントが正しく表示されていました。
フォント表
| font-family | サンプル表示 | W | X | i | A | P | S | J |
|---|---|---|---|---|---|---|---|---|
| Arial | abcde ABCDE 12345 あいうえお | ○ | ○ | ○ | × | ○ | × | × |
| Hiragino Kaku Gothic Pro | abcde ABCDE 12345 あいうえお | × | ○ | ○ | × | ○ | × | ○ |
| Meiryo | abcde ABCDE 12345 あいうえお | ○ | × | × | × | ○ | × | ○ |
| Meiryo UI | abcde ABCDE 12345 あいうえお | ○ | × | × | × | ○ | × | ○ |
| mplus-1p-regular | abcde ABCDE 12345 あいうえお | ○ | ○ | ○ | ○ | ○ | × | ○ |
| mplus-2p-regular | abcde ABCDE 12345 あいうえお | ○ | ○ | ○ | ○ | ○ | × | ○ |
| mplus-1c-regular | abcde ABCDE 12345 あいうえお | ○ | ○ | ○ | ○ | ○ | × | ○ |
| mplus-2c-thin | abcde ABCDE 12345 あいうえお | ○ | ○ | ○ | ○ | ○ | × | ○ |
| mplus-1m-thin | abcde ABCDE 12345 あいうえお | ○ | ○ | ○ | ○ | × | × | ○ |
| mplus-2m-thin | abcde ABCDE 12345 あいうえお | ○ | ○ | ○ | ○ | × | × | ○ |
| MS Gothic | abcde ABCDE 12345 あいうえお | ○ | × | × | × | × | × | ○ |
| MS PGothic | abcde ABCDE 12345 あいうえお | ○ | × | × | × | ○ | × | ○ |
| MS UI Gothic | abcde ABCDE 12345 あいうえお | ○ | × | × | × | ○ | × | ○ |
| Noto Sans Japanese | abcde ABCDE 12345 あいうえお | ○ | ○ | ○ | ○ | ○ | × | ○ |
| Trebuchet MS | abcde ABCDE 12345 あいうえお | ○ | ○ | ○ | × | ○ | × | × |
| Verdana | abcde ABCDE 12345 あいうえお | ○ | ○ | ○ | × | ○ | × | × |
| Yu Gothic | abcde ABCDE 12345 あいうえお | ○ | × | × | × | ○ | × | ○ |
| Yu Gothic UI | abcde ABCDE 12345 あいうえお | ○ | × | × | × | ○ | × | ○ |
| Courier New | abcde ABCDE 12345 あいうえお | ○ | ○ | ○ | × | × | ○ | × |
| Georgia | abcde ABCDE 12345 あいうえお | ○ | ○ | ○ | × | ○ | ○ | × |
| Hiragino Mincho Pro | abcde ABCDE 12345 あいうえお | × | ○ | ○ | × | ○ | ○ | ○ |
| MS Mincho | abcde ABCDE 12345 あいうえお | ○ | × | × | × | × | ○ | ○ |
| MS PMincho | abcde ABCDE 12345 あいうえお | ○ | × | × | × | ○ | ○ | ○ |
| Times New Roman | abcde ABCDE 12345 あいうえお | ○ | ○ | ○ | × | ○ | ○ | × |
- W: Windows
- X: OS X
- i: iOS
- A: Android
- P: プロポーショナル
- S: セリフ
- J: 日本語
ソース
今回のソースは本HTMLのみです。expand source と表示されている場合はその文字をクリックするとソースが展開表示されます。 展開したソースを元に戻すにはブラウザーの再読み込みボタンを押してください。fonts.html
M+ FONTS PROJECT の Web フォントを定義する部分です。<link rel="stylesheet" type="text/css" href="http://mplus-fonts.sourceforge.jp/webfonts/mplus_webfonts.css">Google の Web フォント Not Sans Japanese を定義する部分です。
<style> @import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);<table>タグの<td>タグの中でフォント(font-family)を指定しています。
<h2>フォント表</h2> <table> <tr><th>font-family</th><th>サンプル表示</th><th>W</th><th>X</th><th>i</th><th>A</th><th>P</th><th>S</th><th>J</th></tr> <tr><td>Arial</td><td style="font-family:Arial;">abcde ABCDE 12345 あいうえお</td><td>○</td><td>○</td><td>○</td><td>×</td><td>○</td><td>×</td><td>×</td></tr> <tr><td>Hiragino Kaku Gothic Pro</td><td style="font-family:'Hiragino Kaku Gothic Pro';">abcde ABCDE 12345 あいうえお</td><td>×</td><td>○</td><td>○</td><td>×</td><td>○</td><td>×</td><td>○</td></tr> <tr><td>Meiryo</td><td style="font-family:Meiryo;">abcde ABCDE 12345 あいうえお</td><td>○</td><td>×</td><td>×</td><td>×</td><td>○</td><td>×</td><td>○</td></tr> <tr><td>Meiryo UI</td><td style="font-family:'Meiryo UI';">abcde ABCDE 12345 あいうえお</td><td>○</td><td>×</td><td>×</td><td>×</td><td>○</td><td>×</td><td>○</td></tr> <tr><td>mplus-1p-regular</td><td style="font-family:mplus-1p-regular;">abcde ABCDE 12345 あいうえお</td><td>○</td><td>○</td><td>○</td><td>○</td><td>○</td><td>×</td><td>○</td></tr> <tr><td>mplus-2p-regular</td><td style="font-family:mplus-2p-regular;">abcde ABCDE 12345 あいうえお</td><td>○</td><td>○</td><td>○</td><td>○</td><td>○</td><td>×</td><td>○</td></tr> <tr><td>mplus-1c-regular</td><td style="font-family:mplus-1c-regular;">abcde ABCDE 12345 あいうえお</td><td>○</td><td>○</td><td>○</td><td>○</td><td>○</td><td>×</td><td>○</td></tr> <tr><td>mplus-2c-thin</td><td style="font-family:mplus-2c-thin;">abcde ABCDE 12345 あいうえお</td><td>○</td><td>○</td><td>○</td><td>○</td><td>○</td><td>×</td><td>○</td></tr> <tr><td>mplus-1m-thin</td><td style="font-family:mplus-1m-thin;">abcde ABCDE 12345 あいうえお</td><td>○</td><td>○</td><td>○</td><td>○</td><td>×</td><td>×</td><td>○</td></tr> <tr><td>mplus-2m-thin</td><td style="font-family:mplus-2m-thin;">abcde ABCDE 12345 あいうえお</td><td>○</td><td>○</td><td>○</td><td>○</td><td>×</td><td>×</td><td>○</td></tr> <tr><td>MS Gothic</td><td style="font-family:'MS Gothic';">abcde ABCDE 12345 あいうえお</td><td>○</td><td>×</td><td>×</td><td>×</td><td>×</td><td>×</td><td>○</td></tr> <tr><td>MS PGothic</td><td style="font-family:'MS PGothic';">abcde ABCDE 12345 あいうえお</td><td>○</td><td>×</td><td>×</td><td>×</td><td>○</td><td>×</td><td>○</td></tr> <tr><td>MS UI Gothic</td><td style="font-family:'MS UI Gothic';">abcde ABCDE 12345 あいうえお</td><td>○</td><td>×</td><td>×</td><td>×</td><td>○</td><td>×</td><td>○</td></tr> <tr><td>Noto Sans Japanese</td><td style="font-family:'Noto Sans Japanese';">abcde ABCDE 12345 あいうえお</td><td>○</td><td>○</td><td>○</td><td>○</td><td>○</td><td>×</td><td>○</td></tr> <tr><td>Trebuchet MS</td><td style="font-family:'Trebuchet MS';">abcde ABCDE 12345 あいうえお</td><td>○</td><td>○</td><td>○</td><td>×</td><td>○</td><td>×</td><td>×</td></tr> <tr><td>Verdana</td><td style="font-family:Verdana;">abcde ABCDE 12345 あいうえお</td><td>○</td><td>○</td><td>○</td><td>×</td><td>○</td><td>×</td><td>×</td></tr> <tr><td>Yu Gothic</td><td style="font-family:'Yu Gothic';">abcde ABCDE 12345 あいうえお</td><td>○</td><td>×</td><td>×</td><td>×</td><td>○</td><td>×</td><td>○</td></tr> <tr><td>Yu Gothic UI</td><td style="font-family:'Yu Gothic UI';">abcde ABCDE 12345 あいうえお</td><td>○</td><td>×</td><td>×</td><td>×</td><td>○</td><td>×</td><td>○</td></tr> <tr><td>Courier New</td><td style="font-family:'Courier New';">abcde ABCDE 12345 あいうえお</td><td>○</td><td>○</td><td>○</td><td>×</td><td>×</td><td>○</td><td>×</td></tr> <tr><td>Georgia</td><td style="font-family:Georgia;">abcde ABCDE 12345 あいうえお</td><td>○</td><td>○</td><td>○</td><td>×</td><td>○</td><td>○</td><td>×</td></tr> <tr><td>Hiragino Mincho Pro</td><td style="font-family:'Hiragino Mincho Pro';">abcde ABCDE 12345 あいうえお</td><td>×</td><td>○</td><td>○</td><td>×</td><td>○</td><td>○</td><td>○</td></tr> <tr><td>MS Mincho</td><td style="font-family:'MS Mincho';">abcde ABCDE 12345 あいうえお</td><td>○</td><td>×</td><td>×</td><td>×</td><td>×</td><td>○</td><td>○</td></tr> <tr><td>MS PMincho</td><td style="font-family:'MS PMincho';">abcde ABCDE 12345 あいうえお</td><td>○</td><td>×</td><td>×</td><td>×</td><td>○</td><td>○</td><td>○</td></tr> <tr><td>Times New Roman</td><td style="font-family:'Times New Roman';">abcde ABCDE 12345 あいうえお</td><td>○</td><td>○</td><td>○</td><td>×</td><td>○</td><td>○</td><td>×</td></tr> </table>
