ホームページ  >  記事  >  ウェブフロントエンド  >  CSSでフォントサイズを変更する方法

CSSでフォントサイズを変更する方法

青灯夜游
青灯夜游オリジナル
2021-02-22 15:01:3816877ブラウズ

CSS では、font-size 属性を使用してフォント サイズを変更できます。この属性でフォント サイズを設定できます。構文形式は「font-size: value;」です。実際、 font-size 属性は、フォント内の文字ボックスの高さを設定します。実際の文字グリフは、これらのボックスよりも高い場合もあれば低い場合もあります (通常は低い)。

CSSでフォントサイズを変更する方法

このチュートリアルの動作環境: Windows7 システム、HTML5&&CSS3 バージョン、Dell G3 コンピューター。

css では、font-size 属性を使用してフォント サイズを変更できます。

css font-size プロパティ

font-size プロパティは、フォント サイズを設定するために使用されます。

注: 実際には、フォント内の文字ボックスの高さを設定します。実際の文字グリフは、これらのボックスよりも高い場合もあれば低い場合もあります (通常は低い)。

#値説明smallerfont-size を親要素よりも小さいサイズに設定します。 largerfont-size を親要素よりも大きいサイズに設定します。 length%inherit フォント サイズを親要素から継承することを指定します。 #[推奨チュートリアル: CSS ビデオ チュートリアル 、「
##xx-small
  • x -small
  • small
  • medium
  • large
  • xx-large
  • xx-large
フォント サイズを xx-small から xx-large までのさまざまなサイズに設定します。
デフォルト値: 中。

font-size を固定値に設定します。
親要素に基づいて font-size をパーセンテージ値に設定します。
html ビデオ チュートリアル

」]

/* <absolute-size>,绝对大小值 */
font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large; 
/* <relative-size>,相对大小值 */
font-size: larger;
font-size: smaller; 
/* <length>,长度值 */
font-size: 12px;
font-size: 0.8em; 
/* <percentage>,百分比值 */
font-size: 80%;
 
font-size: inherit;
例: font-size 属性の長さの値を使用してフォント サイズを設定します。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			/* font-size属性设置字体大小--“数字+长度值”
			*/
			.length1 {
				font-size: 20px;
				/* 
				px,像素,它是 CSS 中最常用的长度单位,可以用来指定字体大小,元素的宽度、高度、边框、内边距,外边距的大小等等, 
				它是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI
				
				px 单位的值必须是整数值
				 */
			}
		
			.length2 {
				font-size: 2em;
				/* em
				相对长度单位,取决于目标元素字体尺寸。
				em 单位的值等于基本元素或父元素的字体大小。
			    */
			}
			
			.length3 {
				font-size: 2rem;
				/* rem
				CSS3中加入的 相对长度单位,
				取决于文档根元素(通常为:root)的字体尺寸,适用于依据字体尺寸进行的排版,适用于自适应。 */
			}
			.length4{
				font-size:200%;
				/* 相对于父元素的尺寸的取值,
				实际使用中,如果父元素是一个非稳定的取值,可能会导致父元素被撑开,
				而实际值取决于其祖先元素中最近的一个拥有稳定取值的元素。整数取值,并不适用于解决自适应问题。 */
			}
		</style>
	</head>
	<body>
		<p>这是测试段落</p>
		<p class="length1">这是测试段落</p>
		<p class="length2">这是测试段落</p>
		<p class="length3">这是测试段落</p>
		<p class="length4">这是测试段落</p>
	</body>
</html>
レンダリング:


続きプログラミング 関連知識については、

プログラミング ビデオ CSSでフォントサイズを変更する方法 をご覧ください。 !

以上がCSSでフォントサイズを変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。