2

フォント サイズの指定方法に問題が発生しています。pt を使用してフォント サイズを指定すると、ブラウザー/プラットフォーム間で常に同じように見えるとは限りません。px を使用してフォント サイズを指定すると、IE6 ユーザーはテキストのサイズを変更できません。

4

5 に答える 5

2

A List Apartに関する記事（2007年11月）は、これをさまざまなブラウザーで詳細に調査し、次のように結論付けました。

テキストと行の高さをemsでサイズ設定し、本文にパーセンテージを指定すると（Safari 2の場合はオプションの警告）、今日一般的に使用されているすべてのブラウザーで正確でサイズ変更可能なテキストが提供されることが示されました。これは、キットバッグに入れて、デザイナーと読者の両方を満足させるCSSでテキストのサイズを設定するためのベストプラクティスとして使用できる手法です。

彼らは、このテクニックが最も人気のあるブラウザでどのように見えるかのスクリーンショットを提供しました。彼らが使用したコードは次のとおりです。

<style type="text/css">`
body {
    font-size:100%;
    line-height:1.125em;
}

.bodytext p {
    font-size:0.875em;
}

.sidenote {
    font-size:0.75em;
}
</style>

<!--[if !IE]>-->

<style type="text/css">
body {
    font-size:16px;
}
</style>

<!--<[endif]-->
于 2008-10-17T18:52:45.743 に答える
2

他の人の回答とは逆に、フォント サイズにピクセルを使用することは決してありません。Internet Explorer 6 は依然としてブラウザー市場のパイの大部分を占めており、ピクセル サイズで指定されたテキストのサイズを変更することは絶対にありません (質問で述べたように)。常に「em」を使用するように努める必要があります。

ここで他の人が提案したのと同様の手法を使用して、CSS スタイルを全面的に「リセット」し、フォントのサイズと配置に関するブラウザーの不一致を取り除きます。基本として、 eric meyer のリセット リロードスタイルが好きです。そのライブラリ全体を掘り下げたい場合は、 yahoo reset cssメソッドを使用することもできます。

次に、オーウェン ブリッグスの正気の CSS タイポグラフィ テンプレートを使用します。2003 年以降更新されていないことに気付くかもしれませんが、今日のブラウザーでは完全に安定しています。

このベースを取得したら、<body>タグのフォントの割合を変更するだけで、Web サイト全体のすべてのフォントを同じ方法で簡単にスケーリングできます。

せっかちな人のために、eric meyer のリセット css と owen briggs のタイポグラフィ css をマッシュアップしたものを次に示します (この優れた css フォーマッターで解析):

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;margin:0;padding:0;}
:focus{outline:0;}
body{line-height:1;font-family:verdana, arial, helvetica, sans-serif;font-size:76%;}
ol,ul{list-style:none;}
table{border-collapse:separate;border-spacing:0;}
caption,th,td{text-align:left;font-weight:400;}
blockquote:before,blockquote:after,q:before,q:after{content:"";}
blockquote,q{quotes:"" "";}
a{text-decoration:none;font-weight:700;color:#000;}
a:hover{text-decoration:underline;}
h1{font-size:2em;font-weight:400;margin-top:0;margin-bottom:0;}
h2{font-size:1.7em;font-weight:400;margin:1.2em 0;}
h3{font-size:1.4em;font-weight:400;margin:1.2em 0;}
h4{font-size:1.2em;font-weight:700;margin:1.2em 0;}
h5{font-size:1em;font-weight:700;margin:1.2em 0;}
h6{font-size:.8em;font-weight:700;margin:1.2em 0;}
img{border:0;}
ol,ul,li{font-size:1em;line-height:1.8em;margin-top:.2em;margin-bottom:.1em;}
p{font-size:1em;line-height:1.8em;margin:1.2em 0;}
li > p{margin-top:.2em;}
pre{font-family:monospace;font-size:1em;}
strong,b{font-weight:700;}
于 2008-10-18T08:41:48.537 に答える
1

px を使用しない限り、モックアップのマッチングに常に問題が発生します。 http://www.456bereastreet.com/archive/200602/setting_font_size_in_pixels/
Web ページで px を使用することに特に問題はないと思います。特に、ほとんどすべての最近のブラウザー (webkit を除く) は、デフォルトでテキストのサイズ変更ではなくズームを使用しているためです。

1 つだけを変更するだけでサイト全体のフォント サイズをすばやくスケーリングできるため、デザインの俊敏性が向上するため、Nathan の提案に固執するかもしれません。しかし、あなたが怠け者であるか、本当にスポットオンが必要な場合は、px を恐れる必要はありません。

于 2008-10-17T22:52:31.627 に答える
1

em などのフォント サイズには常に相対単位を使用する必要があります。

于 2008-10-17T17:48:34.563 に答える
1

http://developer.yahoo.com/yui/fonts/#fontsize (編集: これはベース CSS を想定していると思いますが、ベース サイズを 13px と想定しています。 px サイズに対して測定されます。)

とは言っても、特にグラフィカルなモックアップに合わせようとしている場合は、ピクセル単位で完璧なフォント サイズを取得することはできませんが、ブラウザーごとにテキスト レンダリングが異なる場合があります。

于 2008-10-17T17:50:10.473 に答える