HTML Webページのすべての要素のフォント属性を指定するにはどうすればよいですか？

127

フォントファミリー、フォントサイズ、色などを設定すると、一部のネストされた要素が、醜いブラウザのデフォルトでこれらを上書きするようです。

私は自分のページのあらゆる種類の要素に対して実際に何十回もそれらを指定する必要がありますか、それともそれらをグローバルに一度と永久に設定する方法はありますか？

どうやってするか？

css

— 誇り高きメンバー
ソース

1

現在、フォントファミリー、サイズをどの程度正確に設定していますか？

— thecoop、

251

* {
 font-size: 100%;
 font-family: Arial;
}

アスタリスクはすべての要素を意味します。

— バズ
ソース

15

これは機能しますが、最善の解決策ではありません。ブラウザが「*」を認識すると、ページ内のすべてのHTML要素をループし、CSSをそれらに適用します。ルールが意味をなさない要素についてもです。HTMLのサイズによっては、ページのレンダリングが遅くなる可能性があります。

— Cesar Canassa

4

同意しますが、BugAlertが要求したように、CSSをすべての要素に適用します。すべての要素に影響を与えたい場合は、パフォーマンスが少し低下することが予想されます。:)

— Bazzz

1

各スタイル宣言の最後に！importantを追加して、これを上回る他のスタイル宣言に対して安全にすることもできます。

— S ..

4

私はそれが5年になったことを知っていますが、今まで誰も気付いていないことに驚いています。「font-family」でWindowsフォントだけを指定してはいけません（もちろん、それがwebfontでない限り）-Arial、helvetica、sans-serifの方が多いです互換性があります。

— rob74

6

html{font-family:Arial,helvetica,sans-serif;font-size:100%;}body{font-size:1em;font-family:inherit;}フォントの継承。オーバーライドを使用したく*,:before,:after{font-family:inherit;}ない場合は、ユニバーサルセレクターを使用する必要がある場合は、代わりに継承を使用してください。

— ダーチャー

18

IEを使用している場合は、テーブルなどの特定の要素について、ブラウザのデフォルトに戻る可能性があります。次のCSSのようなものでこれに対抗できます。

html, body, form, fieldset, table, tr, td, img {
    margin: 0;
    padding: 0;
    font: 100%/150% calibri,helvetica,sans-serif;
}

input, button, select, textarea, optgroup, option {
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
}

/* rest of your styles; like: */
body {
    font-size: 0.875em;
}

編集：CSSのリセットを確認することをお勧めします。このようなスレッドを見る

— ポール
ソース

10

このアドバイスを強調することはできません。リセットスタイルシートを使用して、すべてを明示的に設定します。クロスブラウザCSSの開発時間を半分に削減します。

Eric Meyerのreset.cssを試してください。

— クリスコックス
ソース

このreset.cssを使用するには、スタイルシートをページにリンクするだけですか、それとも微調整する必要がありますか？基本的に、すべての主要なブラウザーで同じフォントファミリーとサイズを使用する必要があります。reset.cssはデフォルトでそれを行うのに役立ちますか？

— Darth Coder 2014年

1

個別にリンクするのではなく、スタイルシートの最初にコピーアンドペーストする傾向があり、HTTPリクエストを保存します。すべてをゼロにするため、ブラウザー間で一貫したスタイルを設定するのに役立ちます。スタイルはユーザーが作成したスタイルのみになります。

— Chris Cox

ありがとう！私はそれを試しました、そしてそれは私の問題のほとんどを解決しました。ただし、スタイルシートの仕様は同じですが、ChromeとFirefoxのフォントサイズに違いが見られます。これについて何かアイデアはありますか？また、これは良い習慣ですか？

— Darth Coder 2014年

8

bodyタグで設定できます

body
{
    font-size:xxx;
    font-family:yyyy;
}

— ちんちん
ソース

13

ほとんどのブラウザは一部の要素にこのフォントを適用しないため、これは正確ではありません（要素はfont-styleを継承しません）

— travis-146

@ travis-146どのブラウザですか？どの要素？あなたはすべてのブラウザが従わなければならない仕様があることを知っています。

— Bamieh

@Bamieh Chrome 72で（実際に私をここにもたらした）1つの具体的な例は、ボタンまたは選択メニュー内のテキストにフォントを適用しないことです。

— Nick Silvestri

2

body要素のCSS属性を指定する場合<body></body>、後でスタイルシートでそれらをオーバーライドしない限り、属性はCSS 内のすべてに適用されます。

— タイラートリート
ソース

0

本文のすべての要素のスタイルを設定する場合は、次のコードを使用する必要があります^

  body{
    color: green;
    }

— ステパン・ポペレチニ
ソース