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

CSSを使用してピクセルでフォントサイズを設定する


フォントサイズをピクセル単位で指定して、テキストが特定のピクセル数のみを使用するようにすることができます。ピクセルサイズは、画面の解像度と、ブラウザがそれを計算するために使用するアルゴリズムに基づいています。

構文

CSSfont-sizeプロパティの構文は次のとおりです-

Selector {
   font-size: /*value*/
}

次の例は、CSSのfont-sizeプロパティがピクセル単位で設定される方法を示しています-

<!DOCTYPE html>
<html>
<head>
<style>
span {
   background-color: darkseagreen;
   padding: 20px;
   font-size: 15px;
}
span:nth-child(3) {
   font-size: 55px;
}
span:last-child {
   font-size: 25px;
}
</style>
</head>
<body>
<br/>
<span>one</span><span>two</span><span>three</span>
</body>
</html>

出力

これにより、次の出力が得られます-

CSSを使用してピクセルでフォントサイズを設定する

<!DOCTYPE html>
<html>
<head>
<style>
div {
   width: 40%;
   border: 2px solid yellow;
   padding: 20px;
   font-size: 10px;
}
div:nth-child(3) {
   font-size: 20px;
}
div:last-child {
   font-size: 30px;
}
</style>
</head>
<body>
<br/>
<div>one</div>
<div>two</div>
<div>three</div>
</body>
</html>

出力

これにより、次の出力が得られます-

CSSを使用してピクセルでフォントサイズを設定する


  1. CSSのフォントサイズ

    CSS font-sizeプロパティは、フォントのサイズを設定するために使用されます。値は、パーセンテージ、ピクセル、cm、ポイント、emなどの単位、および絶対キーワードで指定できます。相対値はアクセシビリティを最大化します。デフォルトのフォントサイズは16pxまたは12ptです。 構文 CSSfont-sizeプロパティの構文は次のとおりです- Selector {    font-size: /*value*/ } 次の例は、CSSのfont-sizeプロパティ-を示しています。 例 <!DOCTYPE html> <html> <he

  2. CSSを使用して放射状グラデーションのサイズを設定する

    放射状グラデーションのサイズを設定するには、radial-gradient()関数を使用します。この関数は、放射状のグラデーションを背景画像として設定します。関数の2番目のパラメーターは、次の例のように、必要なサイズに設定します- background-image: radial-gradient(40% 50px at center,rgb(30, 255, 0),rgb(0, 195, 255),rgb(128, 0, 32)); 可能な値は、最も遠い角(デフォルト)、最も近い側、最も近い角、および最も遠い側です。以下は、CSSを使用して放射状グラデーションのサイズを設定するためのコード