3

フォントにemsを使用するウェブサイトは、一般的に奇妙ですが、明らかに特定の数字を持っていることに気づきました。たとえば、人気のあるリセットcss --normalize.cssで、h3が1.17em、h4が1.33em、h5が1.67emに設定されていることがわかりました。 、 どうしてこれなの？すべてのフォントサイズを計算するために使用する必要のある計算機などはありますか？

見出し、p、キャプションなどのemsのフォントサイズを調整してきましたが、電卓などを使用せずに、見栄えが良くなるまで大きくしたり小さくしたりしています。言い換えれば、私のウェブサイトのフォントサイズは0.7em、0.9em、1em、1.1emなどで、4emもあります（私は大きなh1が好きです）。

これは悪いですか？フォントサイズにemsを使用するときに重要な事実を無視してきましたか？

4

2 に答える 2

4

ご存知のemように、フォント サイズの単位により、テキスト要素のサイズが他のテキスト要素との相対的な比率を維持できます。

HTML または BODY 要素に「ベースライン」フォント サイズが設定されているスケーラブル テキストの方法があります。私は通常、この「ベースライン」のフォント サイズを 10px に設定しemsています。私のデザインでタイトルが 15px だとします。そのタイトルを 1.5em (1.5 x 10px = 15px) に設定します。このような計算により、一見奇妙な値に見えることがあります。

「分数」の値も異常に見える場合があります。たとえば、「1.33em」は本質的に「1 ⅓ em」であり、「1.67em」は本質的に「1 ⅔ em」です。これらは、ベースラインよりそれぞれ 3 分の 1 と 3 分の 2 大きいフォント サイズを実現します。

オンザフライで (デザイン コンプなしで) デザインしている場合は、見た目が正しくなるまで調整するだけで問題ありません。ブラウザのズームやフォント サイズのデフォルトを変更して、ページがどのように反応するかをテストすることをお勧めします。

于 2013-02-05T01:28:46.693 に答える
1

Showdev は em が何をするかをうまく伝えますが、なぜこのように設定されているのかという質問に答えるために.

この記事は、すべてのブラウザーで一貫したテキスト サイズを実現する方法を説明しています。これは、IE7 の 14px が Firefox の 14px と同じではないということです。Ems はより一貫した結果をもたらします。 http://alistapart.com/article/howtosizetextincss

また、説明を拡大するだけです。Ems は、親要素のフォント サイズに相対的です。だから私が持っている場合：

body {
  font-size: 14px;
}
p {
  font-size: 1em;  /* 14px */
}
h2 {
  font-size: 1.5em; /* 21px */
}
#myDiv {
  font-size: 16px;
}
#myDiv h1 {
  font-size: 2em; /* 32px */
}
于 2013-02-05T01:42:11.107 に答える