How to set font size in css-CSS Tutorial-php.cn

How to set font size in css

青灯夜游

Release： 2021-01-28 09:16:07

Original

127106 people have browsed it

In CSS, you can set the font size through the font-size attribute, and the syntax format is "font-size: value;". The value of this attribute can be keywords such as "small", "large", "smaller", "larger", etc.; it can also be a value in px, em, rem, or % units.

The operating environment of this article: Acer S40-51, CSS3&&HTML5&&HBuilderX.3.0.5 version, Windows10 Home Chinese version

(Learning video sharing: css video tutorial)

In CSS, you can use the font-size attribute to adjust the font size; the font-size attribute is used to set the font size. If an element does not explicitly define the font-size attribute, it will automatically inherit the calculation result of the font-size attribute of the parent element.

Note that the font-size attribute actually sets the height of the character boxes in the font; the actual character glyph may be taller or shorter than these boxes (usually shorter).

Attribute values that can be set:

How to set font size in css

Example 1:

<!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>

Copy after login

Effect Picture:

How to set font size in css

##Example 2:

<!DOCTYPE html>
<html>
	<head>
		<style type="text/css">
			/* font-size属性设置字体大小--相对大小值 */
			.larger {
				font-size: larger;
				/* 把 font-size 设置为比父元素更大的尺寸。 */
			}

			.smaller {
				font-size: smaller;
				/* 把 font-size 设置为比父元素更小的尺寸。 */
			}

		</style>
	</head>

	<body>
		
		<p>这是测试段落</p>
		<p class="larger">这是测试段落</p>
		<p class="smaller">这是测试段落</p>
	</body>

</html>

Copy after login

Rendering:

How to set font size in css

Example 3:

<!DOCTYPE html>
<html>
	<head>
		<style type="text/css">

           /*font-size属性设置字体大小--绝对大小值*/
            .xx-small {font-size: xx-small;}
			.x-small {font-size: x-small;}
			.small {font-size: small;}
			.medium {font-size: medium;}
			.large {font-size: large;}
			.x-large {font-size: x-large;}
			.xx-large {font-size: xx-large;} 
		</style>
	</head>

	<body>	
		
		<p>这是测试段落</p>
		<p class="medium">这是测试段落</p>
		<p class="xx-small">这是测试段落</p>
		<p class="x-small">这是测试段落</p>
		<p class="small">这是测试段落</p>
		
		<p class="large">这是测试段落</p>
		<p class="x-large">这是测试段落</p>
		<p class="xx-large">这是测试段落</p>
	</body>

</html>

Copy after login

Rendering:

How to set font size in css ##For more programming-related knowledge, please visit:

Introduction to programming

! !

The above is the detailed content of How to set font size in css. For more information, please follow other related articles on the PHP Chinese website!