css樣式中怎麼設定字體大小

在css樣式中，可以利用「font-size」屬性來設定字體大小，只需為文字元素設定「font-size:值;」樣式即可。 font-size屬性用於設定字體大小，實際上設定的是字體中字元框的高度，其實際字元字形可能比框高或矮（通常會矮）。

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

css樣式中，可以透過設定「font-size」屬性來設定字體的大小。

透過 font-size屬性可以設定元素中所包含文字的字體大小。如果一個元素沒有明確定義font-size屬性，則會自動繼承父元素的 font-size屬性的計算結果。

實際上font-size屬性設定的是字體中字元框的高度；實際的字元字形可能比這些框高或矮（通常會矮）。

定義font-size 時，可以使用預定義關鍵字、絕對尺寸、相對尺寸：

1）預先定義關鍵字

預定義關鍵字有xx-small、x-small、small、medium、large、x-large、xx-large，尺寸依序增大，類似衣服的尺寸。

使用預設關鍵字有兩大缺陷：一是只有7 種選擇，可選擇範圍太小；二是跟衣服的尺寸一樣，不同廠商對每個關鍵字對應的字體大小的精確數值可能各不不同，導致在不同瀏覽器下，文字的大小可能不同。因此，不建議使用預定義關鍵字來定義字體的大小。

2）絕對尺寸

絕對尺寸有px（像素）、pt（點，1pt 相當於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">字体大小： 14px</p>
<p class="pt">字体大小： 10pt</p>
<p class="in">字体大小： .15in</p>
<p class="cm">字体大小： .4cm</p>
<p class="mm">字体大小： 4mm</p>

上述程式碼定義了 5 種字體大小，都使用絕對單位。使用絕對長度單位後，在固定解析度的顯示器下，顯示出來的都是固定大小。運行結果如下圖所示：

如果以px 為單位設定字體大小，使用IE瀏覽器的用戶，就不能在瀏覽器上透過設定“文字大小”來對文字進行放大或縮小。如果文字太小，就會影響閱讀，使用戶體驗大打折扣。

3）相對尺寸

相對尺寸有em、%、rem，它們都是相對於某個參考基準的字體大小，來計算目前字體的大小，只是參考基準不同而已。

em 的參考基準是父元素。那麼，要如何計算要指定的 em 值呢？實際上，1em 總是等於父元素 font-size屬性的值，這就是 em 的工作原理。據此，可以透過以下公式來確定百分比的值：

目標元素的字體大小/ 父元素的字體大小= 值

因此，在使用em 定義字體大小時，最好在html 或body 元素上建立一個基準。假設在body 中設定的基準大小為12px：

body {
 font-size: 12px;
}

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

18 / 12 = 1. 5

因此，只要將段落的font-size 設為1.5em 就可以了，這條規則就表示段落文字的字體大小為父元素文字大小的1.5 倍：

body p {
 font-size: 1.5em;
}

% 的參考基準也是父元素，100% 也總是等於父元素font-size屬性的值，即1em 就等於100%。也就是說，在用 % 定義字體大小時，只要將 em 的值換算成對應的百分數即可。因此，以下兩個聲明會得到相同的結果（假設兩個段落具有相同的父元素）：

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

需要注意的是，儘管font-size 是可以繼承的，但在使用% 和em定義字體大小時，子元素繼承的是計算結果的值，而不是% 和em 的數字。並且，% 和 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 元素的基準是 p 元素，而 strong 元素的基準是 em 元素。計算結果如下：

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

得到的運行結果如下圖所示：

在這種多層嵌套的情況下，如果某一個計算結果不是整數，瀏覽器可能就會取整，子元素再繼承取整後的值。如果嵌套很深，下層的字體大小就越來越偏離實際計算值。而且，由於參考基準總是隨著元素變化，嵌套越深，計算起來就越困難。

有鑑於此，CSS3中新增的一個相對單位rem（root em的簡稱），它總是以文件的根元素（即html 元素）為參考基準，來設定其它元素的字體大小，即1rem 相當於html 元素font-size屬性的值。考慮以下程式碼：

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

上述声明中，p 元素的字体大小将是 html 字体大小的1.4倍，则计算得到 p 元素的字体大小就是1.4 × 10px = 14px。

这样一来，无论嵌套多少层，参考基准始终不变，计算字体大小就变得容易多了。不过，需要注意的是，rem 是CSS3新增的一个相对单位，IE9 以下版本的老浏览器却不支持它，这也是很多编程人员尚未使用 rem 的原因。

在定义字体大小时，笔者建议在 html 元素中定义绝大多数元素所需要的字体大小，并让所有子元素继承 html 的字体大小。如果某个子元素需要要改变字体大小，则使用相对尺寸 em 或 % 或 rem 重新定义。

这样做的好处是，一方面，绝大多数元素都不必定义字体大小，减少不必要的定义；另一方面，如果完成所有的文字排版后，又要统一调整页面文字大小，就可以只修改 html 中的字体大小，其它所有文字的字体大小会自动变化，修改起来就很容易。

说明：

在某些特殊场景下，需要把 font-size 的值设置为0，来隐藏某些文本。但是，在IE6和IE7中，font-size: 0 的文本却变成了小黑点，并没有完全隐藏。

解决这个问题的最简单办法，就是在 font-size: 0 的同时，把 text-indent 属性设置为一个很大的负值，让这些文本显示在屏幕之外，自然就被隐藏起来。

（学习视频分享：css视频教程）

以上是css樣式中怎麼設定字體大小的詳細內容。更多資訊請關注PHP中文網其他相關文章！