CSSでフォントサイズを指定すると、モックアップと一致し、サイズ変更が可能になりますか？

StackOverflow https://stackoverflow.com/questions/213128

  •  03-07-2019
  •  | 
  •  

質問

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

役に立ちましたか？

解決

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]-->

他のヒント

他の人が答えたのとは反対に、フォントサイズにピクセルを決して使用すべきではありません。 Internet Explorer 6にはまだブラウザー市場のパイが多数あり、ピクセルサイズで指定されたテキストのサイズは変更されません（質問で説明したとおり）。常に<！> quot; em <！> quot; sを使用するよう努力する必要があります。

iは、他の人がここで提案したのと同様の手法を使用します。これにより、i <！> quot; reset <！> quot;フォントのサイズと位置に関するブラウザーの不整合を取り除くために、CSSスタイルを全面的に使用します。私は eric meyerのリセットがリロードされたスタイルをベースにしています。ライブラリ全体を掘り下げたい場合は、 yahoo reset css メソッドを使用することもできます。

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

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

短気な人のために、エリック・マイヤーのリセットCSSとオーウェン・ブリッグスのタイポグラフィ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;}

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

http://developer.yahoo.com/yui/fonts/#fontsize（編集：これはベースCSSを想定していますが、13pxのベースサイズを想定しています。IEでさえ、パーセントがpxサイズに対して測定されるパーセントサイズのテキストを適切にサイズ変更すると思います。）

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

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

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

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top