HTML文書全体にグローバルフォントを適用する方法


175

テキストとフォーマットを含むHTMLページがあります。テキストのすべての内部フォーマットを無視して、同じfont-familyと同じtext-sizeにする必要があります。

HTMLページのグローバルフォント形式を設定したい。

どうすればこれを達成できますか?

回答:


263

!importantCSS内のアスタリスクと要素を利用できるはずです。

html *
{
   font-size: 1em !important;
   color: #000 !important;
   font-family: Arial !important;
}

アスタリスクはすべてに一致します(多分それなしhtmlでも逃げることができます)。

、このスタイルで設定したものをオーバーライドすることができないことを!important保証します(重要でない限り)。(これは、「テキストの内部フォーマットを無視する」という要件を支援するためのものです-これは、他のスタイルがこれらを上書きできないことを意味しました)

ブレース内の残りのスタイルは他のスタイリングと同じであり、そこで好きなことを何でもできます。例として、フォントサイズ、色、ファミリを変更することにしました。


24
+1 !importantは便利ですが、使いすぎると少し「怪物」になる可能性があります。
StuperUser 2011

2
の偉大な使用を提供するための1 !important。常に最後のオプションとして使用する必要があります。
dShringi 2013

3
ここでの使用は!important、元のポスターの要件によるものであることに注意してください。「テキストのすべての内部フォーマットを無視して、同じフォントファミリと同じテキストサイズを使用してください。」その要件がない場合は、使用しないでください!important
セス

1
html * {}またはbody * {}を使用するとbody p {}、インクルードされたスタイルシートのより具体的なオーバーライドを回避できます。body p {}はより具体的でbody {}あるため、アスタリスクはここでは重要な要素です。
ヨーヨー

1
ここhtmlから省略できhtml *ます
JonnyRaa

44

私が考えるベストプラクティスは、フォントを本文に設定することです:

body {
    font: normal 10px Verdana, Arial, sans-serif;
}

そして、あなたがそれをいくつかの要素のために変更することに決めたなら、それは簡単に上書きされる可能性があります:

h2, h3 {
    font-size: 14px;
}

Foundation CSSなどのフレームワークを使用している場合、これは!importantを追加しないと機能しません。
ペトロスキリアコウ2015年

16

CSSのボディセレクターで設定します。例えば

body {
    font: 16px Arial, sans-serif;
}

1
これは、より具体的なセレクターでオーバーライドできます。
StuperUser 2011

2
たとえば、次のようにすべての要素に適用されるわけではありません
。inputtype

12

次のcssを使用します。

* {
    font: Verdana, Arial, 'sans-serif' !important;/* <-- fonts */
}

*-selectorは意味任意の/すべての要素を、それはより多くのオーバーライドに来るとき、明らかに食物連鎖の一番下になり、特定のセレクタを。

注意!important-flagがレンダリングされますfontのためにスタイルの*他のセレクタは、テキスト(例えば、設定するために使用されていても、絶対的なものにするbodyか、多分p)。


1
たぶん!important、他のセレクターが設定を上書きするのを防ぐでしょう。
Quasdunk 2011

1
ええ、そうです。!important他のセレクターが使用しない限り、他のセレクターがオーバーライドするのを防ぎます。へえ。投稿を編集して追加します-ありがとうございます。:-)
karllindmark 2011

うん、そうだね。確かではありませんが、好みは宣言を配置する場所にも依存すると思います。一番下に配置すると、!important上記のより具体的なセレクターのをオーバーライドすることもできます。しかし、それは私が推測するここでのポイントではありません:)
Quasdunk

これは実際に私のために働いた唯一の答えです。理由はわかりませんが、実際はそうでした。
Peter Gordon

5

決して使用しないでください* + !important。HTMLドキュメントの一部のフォントを変更したい場合はどうでしょうか?あなたは常に重要ではなく体を使用する必要があります。!important他のオプションがない場合にのみ使用してください。


0

これを試して:

body
{
    font-family:your font;
    font-size:your value;
    font-weight:your value;
}

こんにちはanglimassです。コードをフォーマットしました。4つのスペースまたは{}ボタンを使用すると、回答にこのようにサンプルコードを表示できます。
StuperUser 2011
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.