溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

css如何設(shè)置字體大小

發(fā)布時間：2021-01-28 14:21:45 來源：億速云 閱讀：223 作者：小新 欄目：web開發(fā)

這篇文章主要介紹css如何設(shè)置字體大小，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

在css中，可以通過font-size屬性來設(shè)置字體大小，語法格式為“font-size:值;”。該屬性的值可以是“smal”、“l(fā)arge”、“smaller”、“l(fā)arger”等關(guān)鍵字；也可是加px、em、rem、%單位的數(shù)值。

在CSS中，可以使用font-size屬性來調(diào)整字體大?。籪ont-size屬性用于設(shè)置字體大小。如果一個元素沒有顯式定義font-size屬性，則會自動繼承父元素的 font-size屬性的計算結(jié)果。

注意，實際上font-size屬性設(shè)置的是字體中字符框的高度；實際的字符字形可能比這些框高或矮（通常會矮）。

可以設(shè)置的屬性值：

css如何設(shè)置字體大小

示例1：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			/* font-size屬性設(shè)置字體大小--“數(shù)字+長度值”
			*/
			.length2 {
				font-size: 20px;
				/* 
				px，像素，它是 CSS 中最常用的長度單位，可以用來指定字體大小，元素的寬度、高度、邊框、內(nèi)邊距，外邊距的大小等等, 
				它是一個虛擬長度單位，是計算機系統(tǒng)的數(shù)字化圖像長度單位，如果px要換算成物理長度，需要指定精度DPI
				
				px 單位的值必須是整數(shù)值
				 */
			}
		
			.length3 {
				font-size: 2em;
				/* em
				相對長度單位，取決于目標元素字體尺寸。
				em 單位的值等于基本元素或父元素的字體大小。
			    */
			}
			
			.length4 {
				font-size: 2rem;
				/* rem
				CSS3中加入的 相對長度單位，
				取決于文檔根元素（通常為:root）的字體尺寸，適用于依據(jù)字體尺寸進行的排版，適用于自適應(yīng)。 */
			}
			.length5{
				font-size:200%;
				/* 相對于父元素的尺寸的取值，
				實際使用中，如果父元素是一個非穩(wěn)定的取值，可能會導致父元素被撐開，
				而實際值取決于其祖先元素中最近的一個擁有穩(wěn)定取值的元素。整數(shù)取值，并不適用于解決自適應(yīng)問題。 */
			}
		</style>
	</head>
	<body>
		<p>這是測試段落</p>
		<p class="length2">這是測試段落</p>
		<p class="length3">這是測試段落</p>
		<p class="length4">這是測試段落</p>
		<p class="length5">這是測試段落</p>
	</body>
</html>

效果圖：

css如何設(shè)置字體大小

示例2：

<!DOCTYPE html>
<html>
	<head>
		<style type="text/css">
			/* font-size屬性設(shè)置字體大小--相對大小值 */
			.larger {
				font-size: larger;
				/* 把 font-size 設(shè)置為比父元素更大的尺寸。 */
			}

			.smaller {
				font-size: smaller;
				/* 把 font-size 設(shè)置為比父元素更小的尺寸。 */
			}

		</style>
	</head>

	<body>
		
		<p>這是測試段落</p>
		<p class="larger">這是測試段落</p>
		<p class="smaller">這是測試段落</p>
	</body>

</html>

效果圖：

css如何設(shè)置字體大小

示例3：

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

           /*font-size屬性設(shè)置字體大小--絕對大小值*/
            .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>

效果圖：

css如何設(shè)置字體大小

以上是“css如何設(shè)置字體大小”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

css
AI
助
手