css樣式中設(shè)置字體大小的方法

這篇文章將為大家詳細(xì)講解有關(guān)css樣式中設(shè)置字體大小的方法，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

在css樣式中，可以利用“font-size”屬性來設(shè)置字體大小，只需給文本元素設(shè)置“font-size:值;”樣式即可。font-size屬性用于設(shè)置字體大小，實(shí)際上設(shè)置的是字體中字符框的高度，其實(shí)際字符字形可能比框高或矮（通常會(huì)矮）。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

css樣式中，可以通過設(shè)置“font-size”屬性來設(shè)置字體的大小。

通過 font-size屬性可以設(shè)置元素中所包含文本的字體大小。如果一個(gè)元素沒有顯式定義font-size屬性，則會(huì)自動(dòng)繼承父元素的 font-size屬性的計(jì)算結(jié)果。

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

定義 font-size 時(shí)，可以使用預(yù)定義關(guān)鍵字、絕對尺寸、相對尺寸：

1）預(yù)定義關(guān)鍵字

預(yù)定義關(guān)鍵字有 xx-small、x-small、small、medium、large、x-large、xx-large，尺寸按順序依次增大，類似于衣服的尺寸。

使用預(yù)定義關(guān)鍵字有兩大缺陷：一是只有 7 種選擇，可選擇范圍太??；二是跟衣服的尺寸一樣，不同廠商對每個(gè)關(guān)鍵字對應(yīng)的字體大小的精確值可能各不不同，導(dǎo)致在不同瀏覽器下，文本的大小可能不同。因此，不推薦使用預(yù)定義關(guān)鍵字來定義字體的大小。

2）絕對尺寸

絕對尺寸有px（像素）、pt（點(diǎn)，1pt 相當(dāng)于 1/72in）、in（英寸）、cm（厘米）、mm（毫米）等。如：

.px {
 font-size: 14px;
}
.pt {
 font-size: 10pt;
}
.in {
 font-size: .15in;
}
.cm {
 font-size: .4cm;
}
.mm {
 font-size: 4mm;
}

<p class="px">字體大?。?nbsp;14px</p>
<p class="pt">字體大?。?nbsp;10pt</p>
<p class="in">字體大?。?nbsp;.15in</p>
<p class="cm">字體大小： .4cm</p>
<p class="mm">字體大?。?nbsp;4mm</p>

上述代碼定義了 5 種字體大小，都使用絕對單位。使用絕對長度單位后，在固定分辨率的顯示器下，顯示出來的都是固定大小。運(yùn)行結(jié)果如下圖所示：

如果以 px 為單位設(shè)置字體大小，使用IE瀏覽器的用戶，就不能在瀏覽器上通過設(shè)置“文字大小”來對文本進(jìn)行放大或縮小。如果文本太小，就會(huì)影響閱讀，使用戶體驗(yàn)大打折扣。

3）相對尺寸

相對尺寸有 em、%、rem，它們都是相對于某個(gè)參考基準(zhǔn)的字體大小，來計(jì)算當(dāng)前字體的大小，只是參考基準(zhǔn)不同而已。

em 的參考基準(zhǔn)是父元素。那么，如何計(jì)算要指定的 em 值呢？實(shí)際上，1em 總是等于父元素 font-size屬性的值，這就是 em 的工作原理。據(jù)此，可以通過以下公式來確定百分比的值：

目標(biāo)元素的字體大小 / 父元素的字體大小 = 值

因此，在使用 em 定義字體大小時(shí)，最好在 html 或 body 元素上建立一個(gè)基準(zhǔn)。假設(shè)在 body 中設(shè)置的基準(zhǔn)大小為 12px：

body {
 font-size: 12px;
}

如果希望 body 中所有段落的字體大小為 18px，根據(jù)上述公式：

18 / 12 = 1. 5

因此，只需將將段落的 font-size 設(shè)置為 1.5em 就可以了，這條規(guī)則就表示段落文本的字體大小為父元素文本大小的1.5 倍：

body p {
 font-size: 1.5em;
}

% 的參考基準(zhǔn)也是父元素，100% 也總是等于父元素 font-size屬性的值，即 1em 就等于 100%。也就是說，在用 % 定義字體大小時(shí)，只需將 em 的值換算成相應(yīng)的百分?jǐn)?shù)即可。因此，以下兩條聲明會(huì)得到相同的結(jié)果（假設(shè)兩個(gè)段落具有相同的父元素）：

p.one {
 font-size: 1.5em;
}
p.one {
 font-size: 150%;
}

需要注意的是，盡管 font-size 是可以繼承的，但在使用 % 和 em 定義字體大小時(shí)，子元素繼承的是計(jì)算結(jié)果的值，而不是 % 和 em 的數(shù)字。并且，% 和 em 還可以累積。考慮以下代碼：

p {
 font-size: 12px;
}
em {
 font-size: 200%;
}
strong {
 font-size: 200%;
}

<p>12px <em> 200% <strong> 200% </strong></em></p>

上述代碼中，p 為父元素，em 為 p 的子元素，strong 為 em 的子元素。em 元素的基準(zhǔn)是 p 元素，而 strong 元素的基準(zhǔn)是 em 元素。計(jì)算結(jié)果如下：

em：12 × 200% = 24px
strong：24 × 200% = 48px

得到的運(yùn)行結(jié)果如下圖所示：

在這種多層嵌套的情況下，如果某一個(gè)計(jì)算結(jié)果不是整數(shù)，瀏覽器可能就會(huì)取整，子元素再繼承取整后的值。如果嵌套很深，下層的字體大小就越來越偏離實(shí)際計(jì)算值。并且，由于參考基準(zhǔn)總是隨著元素發(fā)生變化，嵌套越深，計(jì)算起來也就越困難。

鑒于此，CSS3中新增的一個(gè)相對單位 rem（root em的簡稱），它總是以文檔的根元素（即 html 元素）為參考基準(zhǔn)，來設(shè)置其它元素的字體大小，即 1rem 相當(dāng)于 html 元素 font-size屬性的值?？紤]以下代碼：

html {
 font-size: 10px;
}
p {
 font-size: 1.4rem;
}

上述聲明中，p 元素的字體大小將是 html 字體大小的1.4倍，則計(jì)算得到 p 元素的字體大小就是1.4 × 10px = 14px。

這樣一來，無論嵌套多少層，參考基準(zhǔn)始終不變，計(jì)算字體大小就變得容易多了。不過，需要注意的是，rem 是CSS3新增的一個(gè)相對單位，IE9 以下版本的老瀏覽器卻不支持它，這也是很多編程人員尚未使用 rem 的原因。

在定義字體大小時(shí)，筆者建議在 html 元素中定義絕大多數(shù)元素所需要的字體大小，并讓所有子元素繼承 html 的字體大小。如果某個(gè)子元素需要要改變字體大小，則使用相對尺寸 em 或 % 或 rem 重新定義。

這樣做的好處是，一方面，絕大多數(shù)元素都不必定義字體大小，減少不必要的定義；另一方面，如果完成所有的文字排版后，又要統(tǒng)一調(diào)整頁面文字大小，就可以只修改 html 中的字體大小，其它所有文字的字體大小會(huì)自動(dòng)變化，修改起來就很容易。

說明：

在某些特殊場景下，需要把 font-size 的值設(shè)置為0，來隱藏某些文本。但是，在IE6和IE7中，font-size: 0 的文本卻變成了小黑點(diǎn)，并沒有完全隱藏。

解決這個(gè)問題的最簡單辦法，就是在 font-size: 0 的同時(shí)，把 text-indent 屬性設(shè)置為一個(gè)很大的負(fù)值，讓這些文本顯示在屏幕之外，自然就被隱藏起來。

關(guān)于“css樣式中設(shè)置字體大小的方法”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯(cuò)，請把它分享出去讓更多的人看到。