CSS を使用して Web ページのフォントを変更する方法
特定の単語、段落、または Web ページ全体のフォントを設定する
シンプルなスタイリング オプションにより、Cascading Style Sheets を使用して Web ページのフォントを変更できます。 CSS を使用して、個々の単語、特定の文、見出し、段落全体、さらにはテキストのページ全体のフォントを設定します。
以下のスクリーンショットは JSFiddle.net コード プレイグラウンドに適用されますが、記述されている概念は、コードが実装されている場所に関係なく当てはまります。
デレク・アベラ/ライフワイヤー
CSSでフォントを変更する方法
作る HTML 以下で説明する CSS の変更は、任意の HTML エディターまたはテキスト エディターを使用して行います。
-
フォントを変更するテキストを見つけます。これを例として使用します。
|_+_| -
テキストを SPAN 要素で囲みます。
|_+_| -
属性を追加する > span タグに:
|_+_| -
style 属性内で、次を使用してフォントを変更します。 フォントファミリー スタイル。
|_+_|
ジョン・フィッシャー
-
変更を保存して効果を確認します。
CSS を使用してフォントを変更するためのヒント
-
最良の方法は、常に少なくとも 2 つのフォントを使用することです。 フォント スタック (フォントのリスト)、ブラウザーに最初のフォントがない場合、代わりに 2 番目のフォントを使用できるようにします。
次のように、複数のフォントの選択肢をコンマで区切ります。
|_+_| -
上記の例ではインライン スタイルを使用していますが、 スタイリングの種類 を使用します 外部スタイルシート 1 つ以上の要素を変更します。クラスを使用して、テキスト ブロックにスタイルを設定します。
|_+_|このテキストはArialです
この例では、上記の HTML をスタイルする CSS ファイルは次のようになります。
|_+_|
ジョン・フィッシャー
-
CSS スタイルは常にセミコロン (;) で終了します。スタイルが 1 つしかない場合は必須ではありませんが、始めるのは良い習慣です。