在CSS樣式表中,我們可以使用font-size
屬性來調(diào)整字體的尺寸,以下是一些示例,說明如何使字體變?。?/p>
1、使用像素(px)單位:
- 如果你想將字體大小設(shè)置為12像素,可以使用以下代碼:
```css
p {
font-size: 12px;
}
```
2、使用相對單位:
- 你可以使用相對單位(如em
或%
)來設(shè)置字體大小,它相對于當(dāng)前字體大小或容器寬度,如果你想使字體大小為當(dāng)前字體大小的75%,可以使用以下代碼:
```css
p {
font-size: 75%;
}
```
3、使用關(guān)鍵字:
- CSS還允許你使用關(guān)鍵字(如larger
、smaller
)來調(diào)整字體大小,這些關(guān)鍵字會根據(jù)瀏覽器的默認(rèn)字體大小進(jìn)行調(diào)整。
```css
p {
font-size: smaller;
}
```
4、使用CSS變量:
- 在現(xiàn)代CSS中,你可以使用CSS變量來存儲和重用字體大小值。
```css
:root {
--main-font-size: 16px;
}
p {
font-size: var(--main-font-size);
}
```
示例代碼
以下是一個完整的CSS樣式表示例,展示如何使段落(p
標(biāo)簽)的字體變?。?/p>
/* 使用像素單位設(shè)置字體大小為12像素 */ p.small-font { font-size: 12px; } /* 使用相對單位設(shè)置字體大小為當(dāng)前字體大小的75% */ p.relative-font { font-size: 75%; } /* 使用關(guān)鍵字設(shè)置字體大小為較小 */ p.smaller-font { font-size: smaller; }
HTML示例
以下是如何在HTML文檔中應(yīng)用這些樣式的示例:
<!DOCTYPE html> <html> <head> <title>CSS字體大小調(diào)整示例</title> <style> /* 樣式表內(nèi)容 */ p.small-font { font-size: 12px; } p.relative-font { font-size: 75%; } p.smaller-font { font-size: smaller; } </style> </head> <body> <p class="small-font">這段文字的字體大小為12像素</p> <p class="relative-font">這段文字的字體大小為當(dāng)前字體大小的75%</p> <p class="smaller-font">這段文字的字體大小為較小</p> </body> </html>