web-dev-qa-db-ja.com

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

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

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

以下に書かれている方法もお勧めできません。

div,button,span,strong{font-family:Algerian;}
htmlcssfontsfont-face
83
Michelle Smith

font-family宣言をbodyセレクターに配置します。

body {
  font-family: Algerian;
}

ページ上のすべての要素は、このフォントファミリを継承します（もちろん、後でオーバーライドしない限り）。

94
Jan Hančič
*{font-family:Algerian;}

こんなふうに

99
user1432124

汎用セレクター*はすべての要素を参照します。この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;
}
44
Salam El-Banna

Importantをユニバーサルセレクター*と一緒に使用して、モバイルデバイスがデフォルトのフォントでフォントを変更しないようにします。

* { font-family: Algerian !important;}
17
gabitzish
* { font-family: Algerian; }

汎用セレクター*は、任意の要素を指します。

16
Jukka K. Korpela

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

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

body {
    font-family: Algerian !important;
}

Pre/code、kbdなどの要素には等幅フォントが残っていますが、これらの要素を使用する場合は、等幅フォントを使用することをお勧めします。

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

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

2
FelipeAls

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

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

タグ<body>と</body>の間はすべて同じフォントになります

1
PICwebs

わかりましたので、私はいくつかの異なるオプションを試してこの問題を抱えていました。

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

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

これを私のウェブサイト全体に適用したかったので、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フォントになります

1
Lee Alderman

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

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

div, p {font-family: Algerian}

それは.scssにあります

0
austin