css中改變字體大小的方法

發(fā)布時(shí)間：2021-02-23 09:43:44 來源：億速云閱讀：436 作者：清風(fēng) 欄目：web開發(fā)

本文將為大家詳細(xì)介紹“css中改變字體大小的方法”，內(nèi)容步驟清晰詳細(xì)，細(xì)節(jié)處理妥當(dāng)，而小編每天都會(huì)更新不同的知識(shí)點(diǎn)，希望這篇“css中改變字體大小的方法”能夠給你意想不到的收獲，請(qǐng)大家跟著小編的思路慢慢深入，具體內(nèi)容如下，一起去收獲新知識(shí)吧。

css是什么意思

css是一種用來表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語(yǔ)言，主要是用來設(shè)計(jì)網(wǎng)頁(yè)的樣式，使網(wǎng)頁(yè)更加美化。它也是一種定義樣式結(jié)構(gòu)如字體、顏色、位置等的語(yǔ)言，并且css樣式可以直接存儲(chǔ)于HTML網(wǎng)頁(yè)或者單獨(dú)的樣式單文件中，而樣式規(guī)則的優(yōu)先級(jí)由css根據(jù)這個(gè)層次結(jié)構(gòu)決定，從而實(shí)現(xiàn)級(jí)聯(lián)效果，發(fā)展至今，css不僅能裝飾網(wǎng)頁(yè)，也可以配合各種腳本對(duì)于網(wǎng)頁(yè)進(jìn)行格式化。

在css中，可以使用font-size屬性來改變字體大小，該屬性可以設(shè)置字體大小，語(yǔ)法格式為“font-size:值;”。實(shí)際上font-size屬性設(shè)置的是字體中字符框的高度，實(shí)際的字符字形可能比這些框高或矮（通常會(huì)矮）。

在css中，可以使用font-size屬性來改變字體大小。

css font-size屬性

font-size 屬性用于設(shè)置字體大小。

注意：實(shí)際上它設(shè)置的是字體中字符框的高度；實(shí)際的字符字形可能比這些框高或矮（通常會(huì)矮）。

值	描述
xx-small x-small small medium large x-large xx-large	把字體的尺寸設(shè)置為不同的尺寸，從 xx-small 到 xx-large。默認(rèn)值：medium。
smaller	把 font-size 設(shè)置為比父元素更小的尺寸。
larger	把 font-size 設(shè)置為比父元素更大的尺寸。
length	把 font-size 設(shè)置為一個(gè)固定的值。
%	把 font-size 設(shè)置為基于父元素的一個(gè)百分比值。
inherit	規(guī)定應(yīng)該從父元素繼承字體尺寸。

【、《html視頻教程》】

/* <absolute-size>，絕對(duì)大小值 */
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>，相對(duì)大小值 */
font-size: larger;
font-size: smaller; 
/* <length>，長(zhǎng)度值 */
font-size: 12px;
font-size: 0.8em; 
/* <percentage>，百分比值 */
font-size: 80%;
 
font-size: inherit;

實(shí)例：使用font-size屬性+長(zhǎng)度值設(shè)置字體大小

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

效果圖：

css中改變字體大小的方法

如果你能讀到這里，小編希望你對(duì)“css中改變字體大小的方法”這一關(guān)鍵問題有了從實(shí)踐層面最深刻的體會(huì)，具體使用情況還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì)，如果想閱讀更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

css中改變字體大小的方法

css是什么意思

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽