ウェブサイト全体で「Algerian」という名前の 1 つのフォントを使用したいと考えています。したがって、すべての HTML タグを変更する必要があり、次のようなタグごとに異なるコードを記述したくありません。
button{font-family:Algerian;}
div{font-family:Algerian;}
以下に書かれている方法も非常に推奨されていません。
div,button,span,strong{font-family:Algerian;}
font-family
宣言をbody
セレクターに入れます。
body {
font-family: Algerian;
}
ページ上のすべての要素は、この font-family を継承します (もちろん、後でオーバーライドしない限り)。
*{font-family:Algerian;}
以下のより良い解決策 CSS を使用して Web サイト全体に単一のフォントを適用する
ユニバーサル セレクター*
はすべての要素を参照します。この css がそれを行います。
*{
font-family:Algerian;
}
しかし、残念ながら、FontAwesomeアイコンや独自のフォント ファミリを必要とするアイコンを使用している場合、これは単にアイコンを破壊し、必要なビューを表示しません。
これを回避するには、:not
セレクターを使用できます。fontawesome アイコンのサンプルは です<i class="fa fa-bluetooth"></i>
。次のように簡単に使用できます。
*:not(i){
font-family:Algerian;
}
これにより、タグ name を持つ要素を除くドキュメント内のすべての要素にこのファミリが適用され<i>
ます。クラスに対しても適用できます。
*:not(.fa){
font-family:Algerian;
}
これにより、fontawesome デフォルト クラスを参照するクラス「fa」を持つ要素を除く、ドキュメント内のすべての要素にこのファミリが適用されます。次のように複数のクラスをターゲットにすることもできます。
*:not(i):not(.fa):not(.YourClassName){
font-family:Algerian;
}
important をユニバーサル セレクター * と共に使用して、モバイル デバイスが既定のフォントでフォントを変更しないようにします。
* { font-family: Algerian !important;}
* { font-family: Algerian; }
ユニバーサルセレクター*
は任意の要素を参照します。
ブラウザーによってフォーム要素用に別のフォントが既に定義されている可能性が高いため、このフォントをあらゆる場所で使用する 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 ユーザーをトロールしたい場合を除いて、そうしないでください :) このフォントは、歓迎されている子供の誕生日を除いてひどいものです。
わかりましたので、いくつかの異なるオプションを試したところ、この問題が発生していました。
使用しているフォントは Ubuntu-LI です。作業ディレクトリにフォント フォルダーを作成しました。fonts フォルダの下
私はそれを適用することができました...最終的にここに私の作業コードがあります
これを私のウェブサイト全体に適用したかったので、css doc の一番上に置きました。すべての 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 フォントになります。