CSSを使用してWebサイト全体に単一のフォントを適用する

91

ウェブサイト全体で「アルジェリア」という名前の単一のフォントを使用したい。したがって、すべてのHTMLタグを変更する必要があり、次のように異なるタグに異なるコードを記述したくありません。

button{font-family:Algerian;}
div{font-family:Algerian;}

以下に書かれた方法も非常に推奨されていません：

div,button,span,strong{font-family:Algerian;}

— ミシェル・スミス
ソース

3

font-familyは継承された値なので、本文で定義しないでください。

Jukka K. Korpelaからの回答を選択できます。それは現在選ばれている回答よりも早く、約1か月間、とにかくほぼ同じ内容です。

— okm

グローバルフォントをHTMLドキュメント全体に適用

— davidcondrey

（JanHančič）の回答は、変更したくないタグも含めてすべてのhtmlタグに適用されるため、絶対に使用しないことをお勧めします。たとえば、tdタグ内にimgタグを作成し、text-align：centerとvertical-align：middleにしたとします。この方法を使用すると、imgタグがTDの中心になることはありません。最善の方法：ドキュメントをチェックし、テキストが含まれているタグにフォント形式を適用するだけ

— Mahdi Jazini

109

font-family宣言をbodyセレクターに入れます。

body {
  font-family: Algerian;
}

その後、ページ上のすべての要素がこのfont-familyを継承します（もちろん、後でオーバーライドしない限り）。

— ヤン・ハンジッチ
ソース

11

要素は、スタイルシートが要素のフォントファミリを設定していないfont-family場合にのみ、その親から継承します。ブラウザのスタイルシートは、典型的には、少なくともためのフォントファミリを設定、、、、および要素を。inputtextareacodettpre

— Jukka K. Korpela

あなたが正しいです。私は長い間CSSのリセットを

— 扱っ

または、2つの上位の回答を組み合わせてください... body、* {font-family：Algerian;}

— james ace

105

*{font-family:Algerian;}

以下のより良い解決策 CSSを使用して単一のフォントをWebサイト全体に適用する

— サラム・エル・バンナ
ソース

3

興味深いことに、これはEric MeyerのCSSリセットを使用する場合は機能しません

— ianbeks

それはすべての単一の要素にフォントファミリーを適用しませんか？これは不要な要素（<img>など）に適用され、非効率的であるようです。私は間違いなく間違っている可能性がありますが、すべてにスタイルを適用する場合は注意して読んでいます。

— Max Strater 2014年

ユニバーサルルールは上書きできないため、サイトで2番目のフォントを使用することはできません。

— ジュリアンF.ウェイナート2015年

誰もこれについて言及していないので、ユニバーサルセレクターは遅いことがわかっています。：ここでその上よりclairecodes.com/blog/...

— テリエSolem

または、2つの上位の回答を組み合わせてください... body、* {font-family：Algerian;}

— james ace

48

ユニバーサルセレクター*はすべての要素を参照します。このcssがそれを行います。

*{
  font-family:Algerian;
}

ただし、残念なことに、FontAwesomeアイコン、または独自のフォントファミリを必要とするアイコンを使用している場合は、アイコンが破壊され、必要なビューが表示されません。

これを回避するには、:notセレクターを使用できます。fontawesomeアイコンのサンプルはなので<i class="fa fa-bluetooth"></i>、次のように使用できます。

*:not(i){
  font-family:Algerian;
}

これにより、このファミリがドキュメント内のすべての要素に適用されます。ただし、タグ名が付いた要素は除き<i>ます。クラスに対しても実行できます。

*:not(.fa){
  font-family:Algerian;
}

これは、このファミリをドキュメント内のすべての要素に適用します。ただし、fontawesomeのデフォルトクラスを参照する「fa」クラスの要素は除きます。次のように複数のクラスをターゲットにすることもできます。

*:not(i):not(.fa):not(.YourClassName){
  font-family:Algerian;
}

— サラム・エル・バンナ
ソース

この回答は、ブートストラップ（グリフィコン）からのアイコンと素晴らしいフォントの使用によるWebページでのスタイリングの現在の使用に従って非常に必要な詳細を提供します

— ラクシュマン

より注意してください：（セレクタではなく）CSS3であり、すべてのブラウザと互換性があるわけではありません。IE 9+私たちは世界中のすべての人々がIE -9の家族を永遠に残すのに少なくとも10年待たなければなりません：D： '（

— Mahdi Jazini

19

ユニバーサルセレクターと一緒に重要を使用して、モバイルデバイスがデフォルトのフォントでフォントを変更しないことを確認します*：

* { font-family: Algerian !important;}

— 異端者
ソース

18

* { font-family: Algerian; }

ユニバーサルセレクター*は任意の要素を参照します。

— ユッカ・K・コルペラ
ソース

3

別のフォントがフォーム要素用にブラウザーによって既に定義されている可能性が高いので、このフォントをどこでも使用する2つの方法を次に示します。

body, input, textarea {
    font-family: Algerian;
}

body {
    font-family: Algerian !important;
}

pre / code、kbdなどの要素にはまだ等幅フォントがありますが、これらの要素を使用する場合は、等幅フォントを使用することをお勧めします。

重要な注意：OSにこのフォントがインストールされている人が非常に少ない場合、リストの2番目のフォントが使用されます。ここでは、2番目のフォントを定義しなかったため、デフォルトのセリフフォントが使用され、Linuxを除いてTimes、Times New Romanになります。
2つのオプションがあります：フォントがダウンロード可能なフォントとして自由に使用できる場合は@ font-faceを使用するか、フォールバックを追加します。またはセリフ）。ユーザーのOSに存在するリストの最初のものが使用されます。

（*）Windowsのデフォルトの筆記体はComic Sansです。Windowsユーザーを荒らしたい場合を除いて、それをしないでください:)このフォントは、子供の誕生日を除いてひどいものです。

— FelipeAls
ソース

2

「body」で1と同じフォントを使用する必要がある場合は、これをページの先頭に配置してください：

<style type="text/css">
body {font-family:FONT-NAME ;
     }
</style>

タグ間のすべて<body>とは、</body>同じフォントを持っています

— PICwebs
ソース

1

わかりましたので、いくつかの異なるオプションを試したところ、この問題が発生していました。

私が使用しているフォントはUbuntu-LIで、作業ディレクトリにフォントフォルダーを作成しました。フォントの下に

私はそれを適用することができました...最終的にここに私の作業コードがあります

これを私のウェブサイト全体に適用したかったので、CSSドキュメントの一番上に配置しました。上記のすべてのDivタグ（重要ではありません。スクリプトにポストする個々のフォントが優先されることを知っておいてください）

@font-face{
    font-family: "Ubuntu-LI";
    src: url("/fonts/Ubuntu/(Ubuntu-LI.ttf"),
    url("../fonts/Ubuntu/Ubuntu-LI.ttf");
}

*{
    font-family:"Ubuntu-LI";
}

次に、すべてのH1タグを別のものにしたい場合は、sans sarifと言いましょう。

h1{
   font-family: Sans-sarif;
}

この場合、H1タグのみがsans-sarifフォントになり、残りのページはUbuntu-LIフォントになります。

— リー・アルダーマン
ソース

0

ブートストラップで、Webインスペクターは見出しが「継承」に設定されていると言います

ページを新しいフォントに設定するために必要なのは

div, p {font-family: Algerian}

それは.scssにあります

— オースティン
ソース

-1

*{font-family:Algerian;}

このhtmlは私のために働いた。ワードプレスのキャンバス設定に追加されました。

クールに見えます-ありがとう！

— インテリエンジャ
ソース