Webページに表示されるフォントの種類と色を変更する

注意:このページは、Webページのフォントの種類、サイズ、および色の変更に関連しています。 Microsoft Wordの場合は、Wordでフォントの色、サイズ、または入力方法を変更する方法についてのページを参照してください。

この文書には、Webページのフォントとその色を変更する方法についての説明が含まれています。 今後の適切な構文は、廃止予定のインラインスタイル属性またはフォントタグではなく、クラスセレクタまたはIDセレクタと共にカスケードスタイルシートを使用することです。 ただし、これら2つの方法がほとんどのインターネットブラウザで機能することは注目に値します。

先に進むには、あなたが学びたい、またはすべてのセクションを読みたい方法を選択してください。

フォントフェースとその色をWebページで一度だけ変更することを計画している場合は、elementタグでその属性を変更する必要があります。 style属性を使用して、以下の例に示すように、 font-familycolor 、およびfont-sizeを使用してフォントフェイスと色を指定できます。

コード例

このテキストはフォントCourierを持ち、is blue、そして20pxです。

結果

このテキストのサイズはCourierフォント、青、および20ピクセルです。

1ページ以上にCSSを使用する

1ページのカスタムフォント

Webページのヘッド部分では、タブ間にコードを挿入してさまざまな要素のテキストの外観を変更できます。 次の青いボックスには、呼び出されるとフォントフェイスがCourierに変更されて赤色になるコード例が含まれています。 ご覧のとおり、クラス名は「カスタム」として定義されています。

 .custom {font-family:Courier; 赤色; フォントサイズ:20px。 } 

いったん定義されると、このスタイルはあなたのページのほとんどの要素にクラス "custom"を付けることで適用することができます。 次のボックスは、2行のコードとそれぞれの結果を示しています。

この文章全体が赤で宅配便です

TESTという言葉だけが赤と宅配便です。

結果

この全文は赤と宅配便です。

TESTという言葉だけが赤と宅配便です。

多くのページのカスタムフォント

外部CSSファイルをインポートすると、ユーザーが複数のページのルールを同時に変更できるという点で非常に有益です。 次のセクションでは、フォントを変更し、ほとんどの要素の色を変更する基本的なCSSファイルを作成するための例を示します。 このファイルは、サイト全体でさえも、複数のWebページにロードされる可能性があります。

基本的なテキストエディタを使用して、次のテキストを.cssファイルとして保存すると、インポートの準備が整います。

 @charset "utf-8";

.courier {font-family:宅配便; カラー:#005CB9。 }

上記のテキストを.cssファイル(ours basic.css )に配置したら、他のページから次の例のような行を使用してリンクできます。

ヒント:ユーザーは、インポートされた.cssファイルのコードを変更することによって、ページ上の要素の属性を変更することができます。

フォントタグソリューション

非推奨ですが、HTMLタグは引き続き使用でき、一部のオンラインサービスで使用する必要がある可能性があります。 FONTタグを使用するときは、使用するフォントを記述するface属性を含める必要があります。 以下の例では、Courierフォントと16進数のカラーコード#005CB9を使用しています。これは濃い青です。

コード例

 特別なフォントの例 

結果