Javascriptのフォントサイズ

| | | | | | | | | |

CSS font-sizeプロパティは、ページまたはWebサイト上のテキスト要素のフォントサイズを設定します。 Font Sizeプロパティは、テキストコンテンツを含む任意のクラス、ID、または要素に適用できます。このプロパティは、px、em、rem、vw、vhの値と、キーワードの使用を受け入れます。

ほとんどの開発者は、さまざまなフォントサイズの組み合わせを使用してWebページのスタイルを設定します。たとえば、Web開発者は、見出しに大きなフォントを使用し、本文などに小さなフォントを使用する場合があります。多くの人が疑問に思っています:CSSまたはHTMLでフォントサイズを変更する方法

CSS フォントサイズ?により、開発者はWebページの段落またはテキスト行にフォントサイズを設定します。

このチュートリアルでは、例を参照して、フォントサイズプロパティの使用方法について説明します。このガイドに従うと、テキストサイズの変更のエキスパートになります。

CSSテキストサイズ

適切なフォントスタイルは、Webデザインの重要な部分です。スタイルが設定されていないテキストは、訪問者にとって読みにくいものになり、サイトでの不快な体験につながることはほぼ間違いありません。

font-weight、 font-family、装飾テキストおよび色。もう1つの重要なプロパティは、フォントサイズです。これは、テキストのブロック内のフォントのサイズを制御します。

フォントのサイズ構文CSSは次のとおりです。

sizeValue は、テキストのブロックに使用するフォントのサイズです。ブロックで使用されるフォントのサイズを指定する方法はいくつかあります。 textこの記事で説明するメソッドは次のとおりです。

  • ピクセル
  • em
  • ルートem
  • ディスプレイユニット
  • キーワード

Webページのフォントサイズに各アプローチを使用する方法の例を見てみましょう。

ピクセルを使用してフォントサイズを調整する

次のいずれかthe文字のサイズを設定する最も一般的な方法は、ピクセルを使用することです。

ピクセルは、正確にすることができるため、優れた測定単位です。ピクセル単位は、オペレーティングシステムまたはWebブラウザの影響を大きく受けます。ある画面のピクセルは別の画面のピクセルです。指定されたピクセル値は、さまざまなブラウザでほぼ同じように表示されます

ただし、ピクセルを使用してテキストブロックのフォントのサイズを設定することには制限があります。アクセシビリティ。一部のブラウザではユーザーがフォントサイズをカスタマイズできないため、ヘルプで設定されたピクセルフォントサイズにアクセスできません。たとえば、視覚障害のあるユーザーは、ピクセルを使用して文字サイズを設定するサイトを使用するのが難しい場合があります。

作成しましょうすべての

のフォントサイズが28pxで、すべての

要素が12pxのWebサイトこれを行うには、次のコードを使用できます。

このコードでは、セットCSSセレクターを使用してすべての

のフォントサイズを設定しました 28pxおよびすべての

12px 。次のスニペットは、これらの要素が新しいフォントサイズでどのように表示されるかを示しています。

>

クリックボタンの画像 でコードを実行します

CSSでフォントサイズを設定するもう1つの一般的な方法は、em寸法を使用することです。測定単位emは、親のフォントサイズを指します。définissの場合2emのフォントサイズを入力します。 、フォントサイズは親要素の2倍になります。

emsを使用してCSSフォントをスケーリングする例

たとえば、テキストの段落が保存されているとします。ボックス内。ボックスのフォントサイズは20pxです。テキスト段落のフォントサイズを1emに指定した場合、段落のフォントサイズは20pxになります。 。これは親要素のフォントサイズと同じです。

親要素のフォントサイズを設定していない場合、ブラウザはそのブラウザに指定されているデフォルト値を使用します。通常は16pxです。したがって、フォントのサイズを指定していない場合は、 1em def ault 16px 2emデフォルトの32px

Webページのフォントサイズが16px。すべてのテキスト段落をこのフォントサイズを使用して表示する必要があります。つまり、 1em値を使用する必要があります。さらに、すべての頭を 24pxのフォントサイズで表示する必要があります。これは1.5emと同じです。

次を使用できます。これを行うためのコード:

このコードでは、すべての段落のサイズは 16px 1em = 16px ofデフォルト)およびすべての

要素は24px 1.5em = 24px )になります。

これは、Webページでのテキストの表示です。

上記の例では、両方の<の新しいスタイルを確認できます。 h1>および

がボックス内に表示されている場合はフォントサイズが異なると、

のサイズが変更されます。これは、em値が親からフォントサイズを継承するためです。

Rootを使用してフォントサイズを定義します。 em

Court root em、 rem は、CSS3で導入された新しい測定単位であり、フォントサイズの設定に使用できます。 remは、親要素ではなく、ルート要素にリンクされています。

値は、次のことができるので便利です。ドキュメント全体に関連する値を指定します。このように、親要素に別の値がある場合、テキストサイズは影響を受けませんem

デフォルトのフォントサイズが16pxのWebページがあるとします。前の例のように、すべての

24pxに表示し、すべての段落を 16pxに表示する必要があります。これらのフォントサイズは、次のコードを使用して定義できます。

コードは前の例とほぼ同じです。唯一の違いは、使用単位が emではなくremであることです。この例では、見出しと最上位の段落のフォントサイズは常にそれぞれ 24px16pxになります。これは、デフォルトのWebページのフォントサイズが 16pxであるためです。

単語を使用してフォントのサイズを設定します-キー

キーには2つのタイプがありますCSSでフォントのサイズを定義するために使用できる単語。

絶対キーワードは、Webページの変更に関係なく同じままのフォントサイズを定義するために使用されます。絶対フォントサイズを定義するために使用できるキーワードは次のとおりです。

  • xx-small (9px)
  • X- small (10px)
  • small (13px)
  • (16px)
  • large (18px)
  • x-large (24px)
  • xx-large (32px)

括弧内の値は、デフォルトのフォントサイズが 16pxであるブラウザに基づいています。

一方、相対キーワード、Webページの他の場所のフォントサイズに基づいて変更されるフォントサイズを定義します。使用できる相対キーワードは、最小と最大です。これらのキーワードは、ページ上の他のフォントサイズが変更されたときにフォントのサイズを変更できるため便利です。

ページ上のすべてののサイズを 24px (x-large)およびすべての

; at 18px (large)。次のコードを使用して実行できます:

クリックします。Image ofボタン "height =" 24 "class =" wp-image-13930 "style =" width:24px; "src =" https://744025.smushcdn.com / 1245953 / wp-content / uploads / 2020/03 / iconfinder_play-circle-outline_326584.png?不可逆圧縮=1&バンド= 1&webp = 1 "alt ="キーの画像"実行コード"、円の三角形 "srcset =" https://744025.smushcdn.com/1245953/wp-content/ uploads / 2020/03 / iconfinder_play-circle-outline_326584-20x20.png?lossy = 1&strip = 1&webp = 1 20w、https://744025.smushcdn.com/1245953/wp-content/uploads/2020/03 / iconfinder_play -circleoutline_326584.p ng? Lossy = 1&strip = 1&webp = 1 24w"size="。 (max -width:24px)100vw、24px">ボタン 上記のエディターコードで、HTML/CSSの出力を確認します

の文字サイズcode>

はそれぞれ24px18pxです。ただし、これらは指定していません。ピクセルを使用した寸法。これの代わりに、ブラウザが提供するデフォルトのフォントサイズのキーという単語を使用しました。

表示単位を使用してフォントサイズを設定します

表示単位は次のように計算されます。ブラウザのウィンドウサイズのパーセンテージ。CSSでサポートされている2つの表示単位は、表示の高さ( vh )と表示の幅( vw

以降です。表示単位は、ブラウザウィンドウサイズのパーセンテージです。たとえば、 1VH はウィンドウの高さの1%に相当します。したがって、1000pxの大きなウィンドウがある場合は、 1VH は10pxに相当します。

ブラウザウィンドウのサイズを変更するとフォントサイズが変わるため、ウィンドウ単位を使用すると便利です。これにより、配信に役立ちます。よりアクセスしやすく、さまざまなサイズのブラウザやデバイスに適応できるユーザーエクスペリエンス。

ヘッダーがウィンドウ幅の4%であるサイトを作成するとします。そして、そのポイントは可視領域の幅の1%です。次のコードを使用してこれを行うことができます:

クリックボタンの画像

ブラウザのサイズを変更すると、これらのヘッダーのサイズが変更されます。

結論

fontsizeプロパティはCSS(したがってHTML)でフォントサイズを変更するために使用されます。ピクセル、ems、rems、キーワード、表示単位など、フォントのサイズを確認できるいくつかの測定単位を受け入れます。 CSSとID、および要素自体に適用できます。

このチュートリアルでは、 CSSフォントサイズの基本。これで、エキスパートのようにフォントサイズ属性の使用を開始する準備が整いました。

Javascriptのフォントサイズ __del__: Questions

Javascriptのフォントサイズ absolute: Questions

Shop

Best Python online courses for 2022

$

Best laptop for Fortnite

$

Best laptop for Excel

$

Best laptop for Solidworks

$

Best laptop for Roblox

$

Best computer for crypto mining

$

Best laptop for Sims 4

$

Best laptop for Zoom

$499

Latest questions

NUMPYNUMPY

psycopg2: insert multiple rows with one query

12 answers

NUMPYNUMPY

How to convert Nonetype to int or string?

12 answers

NUMPYNUMPY

How to specify multiple return types using type-hints

12 answers

NUMPYNUMPY

Javascript Error: IPython is not defined in JupyterLab

12 answers

Wiki

Python OpenCV | cv2.putText () method

numpy.arctan2 () in Python

Python | os.path.realpath () method

Python OpenCV | cv2.circle () method

Python OpenCV cv2.cvtColor () method

Python - Move item to the end of the list

time.perf_counter () function in Python

Check if one list is a subset of another in Python

Python os.path.join () method