web-dev-qa-db-ja.com

フォントサイズにパーセントを使用していますか?

フォントのサイズ変更について最近読んだことがありますが、そのほとんどは、古いブラウザーでは適切にサイズ変更されないため、pxを許されない犯罪として使用することをおろそかにしています(わかりました。

シンプルでわかりやすく、デザインで指定されている正確なフォントサイズを簡単に実現できるという理由だけで、過去にpxであった自分自身を使用する標準が本当に欲しいのですが、今は使用することを疑っていますピクセル。

JQueryを使用して作成したテキストサイズ変更機能が必要だったため、最近プロジェクトでemを使用しました。しかし、emサイズが指定された2つの要素が互いに内部にある場合、emが増幅する方法のために、かなりイライラすることがわかりました(理にかなっている希望)

フォントのサイズ変更に%を使用することについて疑問に思っていましたが、いくつかの大きなWebサイトがこの手法(つまり、Yahoo)を使用しているのを見てきました。

要するに、CSSのフォントサイズ変更に%を使用する際に問題があるのではないかと考えていますか?フォントサイズ変更の点でPXを使用するよりも良いでしょうか?また、顕著な欠点はありますか?

質問の前の宣伝文句が少し多すぎる場合はおologiesび申し上げます:/私はまだQA全体に慣れている

43
Sean

CSS3では、rem(root em)を使用します。サイズ変更は、親要素のemサイズの影響を受けません。

ルートフォントサイズは、:root擬似要素、次のように:

:root {
    font-size: 16px;
}
16
Richik SC

これを使ってみてください

body {
  margin: 0px;
  padding: 0px;
  font-size: 62.5%;
}

body>#wrapper {
  font-size:1em;
}

したがって、「ラッパー」内で1emのようなものを言うと、10pxに非常に近いサイズになります。以下にテーブルの例を示します。

3em == 30px
.5em == 5px
8.5em == 85px

これは、移行に役立ちます

P.d:もちろん、本文の後にラッパータグが必要です

7
Alwin Kesler

私が経験した限りのWebデザインの標準は、パーセントを使用して本文のフォントサイズを設定し、その後emsを使用してフォントサイズを変更することです。 bodyタグの外側でパーセントを使用しても悪影響はありませんが、多くの開発者はemを使用する方が簡単だと思います(誰でも私にこれをチェックすることは自由です)。

Emsを使用して本文のフォントサイズを設定すると危険が生じます。古いブラウザは、特にズームしたときに、チョークしてテキストを誤って表示します。

3
bronzehedwick