この記事では、中国語と英語を含む一般的なWebフォントをご紹介します：
英語
Sans-serif
- Helvetica:デザイナーに最も愛されるフォントと評され、Realistスタイルのシンプルでモダンなラインが非常に人気です。Macでは最適なWebフォントとされていますが、Windowsではヒンティングの影響で表示が非常に悪くなります。
- Arial:Helveticaの「クローン」で、Helveticaと非常によく似ています。細部、例えばRやGに少し違いがあります。フォントサイズが小さすぎたり文字数が多いと、少し目が疲れやすいです。WinとMacの両方で正常に表示されます。
- Lucida Family:Lucida GrandeはMac OS UIの標準フォントで、ヒューマニストスタイルに属し、やや活発な印象です。Macでの表示はWinよりも優れています。
- Verdana:スクリーン表示用に特別に設計されたフォントで、ヒューマニストスタイルです。小さいフォントサイズでもはっきり表示されますが、フォントのディテールが大きく欠落しているため、見出しには使わないほうが良いです。
- Tahoma:こちらもヒューマニストスタイルで、Verdanaに少し似ていますが、やや幅が狭く、カウンターがやや小さいです。かつてはWindowsの標準フォントであり、Mac 10.5以降ではデフォルトでインストールされています。
- Trebuchet MS:マイクロソフトのために設計されたヒューマニストスタイルのフォントです。個人的には個性が強すぎて、うまく使わないと雰囲気に合わないと思います。
Serif
- Georgia:本文のスクリーン表示に適したセリフ体は、基本的にGeorgiaをおいて他にありません。筆画が太く、セリフがはっきりしており、輪郭が大きいので、小さいフォントサイズでもはっきり表示され、ディテールもまずまずです。
- Times:Timesは新聞用に設計され、限られたスペースに多くの文字を詰め込めるのが特徴ですが、筆画が弱く、小さいフォントサイズの本文をスクリーンで見ると目が疲れます。かつてEngadgetがリニューアルした際に本文でTimesを使用し、さんざん批判された後、Georgiaに変更されました。
中国語
- 中易宋体（SimSun）：Winで最も一般的なフォントです。小さいフォントはビットマップ、大きいフォントはTrueTypeですが、大きいフォントは見た目が良くないので、見出しには使わないほうが良いです。
- 微软雅黑（Microsoft YaHei）：Vista以降に新しく導入されたフォントで、ClearTypeをオンにすると表示効果が良く、オフにするとぼやけます。
- 华文细黑（STHeiti）：Macでのデフォルトの中国語フォントです。
- Droid Sansおよび派生のWenQuanYi Microhei：Androidの中国語フォントであり、Linuxの大多数のディストリビューションのデフォルト中国語でもあります。もちろんWenQuanyi Zenheiを使用するところもありますが、最近では少なくなっています。
注意：CSS3からEmbedded font（埋め込みフォント）がサポートされ始めたため、英字フォントの選択肢は一気に増えましたが、中国語フォントはファイルサイズが大きいため、依然として限られた選択肢しかありません。
Webフォントの効果
- Georgia
- ABCDEFGHIJKLMNOPQRSTUVWXYZ (26px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (22px)
abcdefghijklmnopqrstuvwxyz 0123456789 - Impact
- ABCDEFGHIJKLMNOPQRSTUVWXYZ (26px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (22px)
abcdefghijklmnopqrstuvwxyz 0123456789 - Verdana
- ABCDEFGHIJKLMNOPQRSTUVWXYZ (24px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (20px)
abcdefghijklmnopqrstuvwxyz 0123456789
- Trebuchet MS
- ABCDEFGHIJKLMNOPQRSTUVWXYZ (24px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (20px)
abcdefghijklmnopqrstuvwxyz 0123456789
- 微软雅黑
- 24px 微软雅黑 中国語フォント太字中国語フォント ©一方天
ABCDEFGHIJKLMNOPQRSTUVWXYZ (24px)
abcdefghijklmnopqrstuvwxyz 0123456789
20px 微软雅黑 中国語フォント太字中国語フォント ©一方天
ABCDEFGHIJKLMNOPQRSTUVWXYZ (20px)
abcdefghijklmnopqrstuvwxyz 0123456789 - 宋体
- 26px 宋体 中国語フォント太字中国語フォント
ABCDEFGHIJKLMNOPQRSTUVWXYZ (26px)
abcdefghijklmnopqrstuvwxyz 0123456789
18px 宋体 中国語フォント太字中国語フォント
ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
abcdefghijklmnopqrstuvwxyz 0123456789
- 黑体* 太字は慎重に使用してください
- 26px 黑体 中国語フォント太字中国語フォント
ABCDEFGHIJKLMNOPQRSTUVWXYZ (26px)
abcdefghijklmnopqrstuvwxyz 0123456789
18px 黑体 中国語フォント太字中国語フォント
ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
abcdefghijklmnopqrstuvwxyz 0123456789
英語プロポーショナルフォント（非等幅）
- Arial
- ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (16px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (11px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (10px)
abcdefghijklmnopqrstuvwxyz 0123456789
- Comic Sans MS
- ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (16px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (11px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ 10px
abcdefghijklmnopqrstuvwxyz 0123456789
- Georgia
- ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (16px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (11px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (10px)
abcdefghijklmnopqrstuvwxyz 0123456789
- Tahoma
- ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (16px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (11px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (10px)
abcdefghijklmnopqrstuvwxyz 0123456789
- Time News Roman
- ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (16px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (11px)
abcdefghijklmnopqrstuvwxyz 0123456789
- Trebuchet MS
- ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (16px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (11px)
abcdefghijklmnopqrstuvwxyz 0123456789
- Verdana
- ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (16px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (11px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (10px)
abcdefghijklmnopqrstuvwxyz 0123456789
英語等幅フォント
- Courier New
- ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (16px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
abcdefghijklmnopqrstuvwxyz 0123456789
- Hei
- ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (16px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
abcdefghijklmnopqrstuvwxyz 0123456789
- Monaco
- ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (16px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
abcdefghijklmnopqrstuvwxyz 0123456789
- simhei
- ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (16px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
abcdefghijklmnopqrstuvwxyz 0123456789
中国語フォント
- 宋体
- 14px 宋体 中国語フォント太字中国語フォント
ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
abcdefghijklmnopqrstuvwxyz 0123456789
12px 宋体 中国語フォント太字中国語フォント
ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
abcdefghijklmnopqrstuvwxyz 0123456789
- 微软雅黑
- 14px 微软雅黑 中国語フォント太字中国語フォント
ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
abcdefghijklmnopqrstuvwxyz 0123456789
12px 微软雅黑 中国語フォント太字中国語フォント
ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
abcdefghijklmnopqrstuvwxyz 0123456789
- MingLiU 11px 中国語文字
- 11pxの鮮明な中国語フォント太字中国語フォント (11px)
- PMingLiU 11px 中国語文字
- 11pxの鮮明な中国語フォント太字中国語フォント (11px)
- よく使う11pxの使用例：Tahoma、Verdana、Arial、PMingLiu、MingLiu
- 11pxの鮮明な中国語フォント太字中国語フォント (11px)
- MS UI Gothic 10px 中国語文字
- このフォントは繁体字中国語だと少しはっきり表示されると言われていますが、どちらにせよあまりはっきりとは見えません。(10px)