Web レイアウト_html/css_WEB-ITnose でのグローバル フォントの最適な制御

Web ページのレイアウトにおけるフォントの制御は、ユーザー エクスペリエンス、つまりページの美しさに関係するため、非常に重要です。この記事は著者独自のCSS実線経験をもとにまとめています。

body { font-family: Arial, sans-serif; }

これは私がこれまで使用した中で最高のグローバル フォント ソリューションです。もちろん、これは私の個人的な基準に基づいたものです。後で他のフォントの書き方の長所と短所を分析し、最後にこの書き方の特徴をまとめます。

body { font-family: "宋体", sans-serif; }

この書き方の欠点は次のとおりです。

1. Safari および Vista の IE7 では、Song フォントが非常に見苦しくなります。

2. Song フォントの英語テキストは醜いです。

3. CSS で中国語を記述する場合は、HTML と CSS のコーディングが一致しているかどうかに注意する必要があります。

body { font-family: SimSun,sans-serif; }

このように書くと、上記の 3 番目の問題を回避できます。しかし、Song フォント自体は本当に醜いです。デフォルトのフォントをさまざまなプラットフォームで使用したいと考えています。 XPはSongフォント、VistaはMicrosoft Yahei、MacはHelveticaです。この場合、最初のフォントを英語フォントに設定することしかできません。これにより、中国語に遭遇したときにブラウザが自動的にデフォルトのフォントを呼び出します (Vista IE 7 の一部のバージョンでは、デフォルトで宋王朝が使用されるようです。私にできることは何もありません)これについては、設定でユーザーに自主性を与えます)

body { font-family: Tahoma, sans-serif; }

これは良い解決策です。 Tahoma は実際には非常に美しいフォントですが、次のような問題もあります。

1. Tahoma で表示される中国語では、IE6 では下線が中国語の文字にぴったりくっついてしまい、見苦しくなります。

2. IE6 では、Tahoma を 13px に正しく設定できません。 14pxほどの大きさになります。ただし、他のブラウザではこの問題は発生しません。

3. 中国語と英語が 1 行に同時に表示され、この行にvertical-align 属性で定義されている要素がある場合、IE 6 および 7 ではテキストが不均一になり、下線さえも間違って配置されてしまいます。

body { font-family: Arial, ans-serif; }

Arial には上記 2 つの問題のどちらもありません。しかし、Arial には欠点もあります。

1. Tahoma よりも醜い。

2. タホマには 3 番目の問題も存在します。ただし、このバグには解決策があります。それは、この行でzoom:1を定義することです。

したがって、Arial として定義するのが最も適切であることが簡単にわかります。それがどうしても気に入らない場合は、グローバルを Tahoma として定義し、下線付きのテキスト (リンクなど) を Arial として定義することもできます。

最後に、グローバル フォントについて、以下を追加してください:

IE では、すべてのフォーム要素は本文のフォント属性を継承しないため、個別に設定する必要があります:

input, label, select, option, textarea, button, fieldset, legend { font-family:Tahoma,sans-serif;}