JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

HTMLでテキストのフォントファミリーを設定する方法【初心者向け解説】

HTMLでテキストのフォントファミリー（書体）を変更するには、style属性を使用します。style属性は、要素に対してインラインスタイルを直接指定するための属性です。具体的には、HTMLの<p>タグなどと組み合わせ、CSSのfont-familyプロパティを使ってフォントを指定します。

なお、HTML5では<font>タグは廃止されたため、現在は非推奨です。フォントの種類やサイズを指定する場合は、CSSによるスタイル指定が標準的な方法となっています。

注意点：style属性は優先度が高い

style属性で指定したスタイルは、最も優先度が高い点に注意しましょう。インラインスタイルは、HTML内の<style>タグや外部スタイルシートで定義されたスタイルを上書きします。そのため、サイト全体で一貫性のあるデザイン管理を行いたい場合は、外部CSSでの一括指定が推奨されます。

サンプルコード

以下のコードを実行すると、HTMLページ上でテキストのフォントファミリーを変更できます。実際にブラウザで表示して動作を確認してみてください。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Font Family</title>
   </head>

   <body>
      <h1>Our Products</h1>
      <p style="font-family:georgia,garamond,serif;">
         This is demo text
      </p>
   </body>
</html>

この例では、<p>タグに style="font-family:georgia,garamond,serif;" を指定しています。複数のフォントをカンマ区切りで列挙しておくと、最初に指定した「Georgia」が閲覧環境に存在しない場合、次候補の「Garamond」、さらに存在しなければ汎用フォントの「serif」が適用される仕組みです。

  1. HTML DOM StyleのlineHeightプロパティとは？使い方と設定例を解説

    lineHeightプロパティとはHTML DOMのStyleオブジェクトが持つlineHeightプロパティは、テキストの行間（行の高さ）を設定・取得するために使用されます。行間を適切に調整することで、文章の可読性を大幅に向上させることができます。lineHeightプロパティの値を設定する構文object.style.lineHeight = normal|number|length|%|initial|inherit;lineHeightプロパティの値を取得する構文object.style.lineHeight;指定できる値normal： 通常の行間。デフォルト値です。number（数値

  2. Tkinterでテキストのフォントを設定する方法をわかりやすく解説

    Tkinterには、ウィジェットにさまざまな機能を持たせるための組み込みメソッドや関数が多数用意されています。Tkinterアプリケーションでは、font(フォントファミリー, フォントサイズ, スタイル)属性を使用することで、テキストウィジェットのフォントプロパティを自由にカスタマイズできます。このタプルは、Textウィジェットのコンストラクタ内で直接宣言することが可能です。サンプルコード以下の例では、カスタマイズしたフォントプロパティを持つテキストウィジェットを作成しています。# tkinterライブラリをインポート from tkinter import * from tkinter i