中国語と英語のWebページのランキングが混在する問題の解決策_体験交流

基本的に私はこの問題に夢中になっています。症状は次のとおりです。

症状の説明: IE (6 または 7、8 は試していません) で、中国語と英語を混在させ、デフォルトのフォントを使用し、li リストを使用して float を作成すると、上記のような症状が表示されます。と文字が上下に配置されてしまいます。レイアウトの美しさに影響します。上の図の状況の理由は、中国語と英語のテキストのベースラインが異なるためです。arial フォントの下端は Song フォント (どちらもサイズ 12) よりも 1 ピクセル低くなります。また、英語でも i と y の上下のベースラインが異なる場合があります。そのため、中国語と英語を混ぜて並べると、明らかに高低差が生じて、レイアウトが不均一になってしまいます。拡大画像をご覧ください。

中国語と英語の両方の文字に宋体スタイルを使用するソリューションを採用します

は文字の配置がずれる問題を解決できますが、宋代の英単語はセリフ フォントです (タイムズ ニュー ローマンは英語でセリフ フォントです)。フォントはコンパクトで詳細が多く、並べると非常に目を引きます。しかし、連続して書くと識別が混乱して間違った行に目がいってしまいがちです。 セリフ フォントの長所と短所の詳細については、この記事を参照してください。逆に、英語を表現する場合にはサンセリフ体を使用した方が美しくエレガントです。

解決策 1: 「団子」子供用靴の発見。

英語では tahoma フォントが使用されています - Song フォント、arial フォントと tahoma フォントの比較 - arial と tahoma sans serif の方が洗練されています

中国語と英語が混在する場合、tahoma フォントを使用する状況

中国語と英語の混合と純粋な中国語の組み合わせの行の高さは同じですが、ホバー状態では a に下線が引かれて中国語と貼り付けられます。

問題: IE6 以下のバージョンで tahoma フォントを使用すると、すべての中国語フォントのリンクの下線がフォントにくっついて表示されます。タオバオもこのソリューションを使用しています。大規模なプロジェクトで、さまざまな人々が協力してページのモジュールを完成させる場合、フォントをより標準化し、統一された仕様の下でずれを減らし、下線付きの tahoma フォントを使用する価値があると私は考えています。フォントにこだわる

ライスの子供用靴から次のものが見つかりました:

英語は Arial フォントを使用し、中国語は Song フォントを使用します。 タグに line-height:1.231 を指定することで、行の高さが不均一であったり、フォントや下線の密着が不均一だったりする問題を解決できます。 (中国語と英語を大規模に混合することが適切かどうかはわかりません。後で検証する必要があります。)

要約: ご飯ありがとう、餃子ありがとう、YUI ありがとう、タオバオありがとう!