網(wǎng)頁設(shè)計(jì)：關(guān)于字體的應(yīng)用技巧

2024-07-11 08:23:05

字體：大中小

供稿：網(wǎng)友

一、小述

作為一個(gè)并非前端開發(fā)的人，卻有時(shí)候喜歡前端的一些東西。如果說網(wǎng)站是一項(xiàng)建筑工程的話，那么后臺(tái)就是比較重量級(jí)的鋼筋水泥土，先搭建好整體框架，然后再慢慢地填充。那么前端就是修補(bǔ)、裝飾、美化等工作了，它起到了讓人一眼都愛上她的作用。一個(gè)網(wǎng)站的好壞，不僅僅是性能上的比較，很多時(shí)候是界面美化和用戶體驗(yàn)上的。對(duì)于界面美化，Ps能很好勝任，本人Ps也不差，然后就是HTML系列、Css系列；對(duì)于用戶體驗(yàn)上，我相信Javascript、Jquery、Ajax一定能勝任。

愛美之心，人人皆有，對(duì)于網(wǎng)站整體設(shè)計(jì)亦如此。今天就來學(xué)習(xí)網(wǎng)頁設(shè)計(jì)中字體的技巧。

二、Css字體

1、字體系列：

W3C中說：在 CSS 中，有兩種不同類型的字體系列名稱：通用字體系列 - 擁有相似外觀的字體系統(tǒng)組合（比如 "Serif" 或 "Monospace"）、特定字體系列 - 具體的字體系列（比如 "Times" 或 "Courier"），這里我們最好配合使用，以免其他機(jī)器上沒有安裝指定的字體。

2、字體大?。?/p>

font-size 值可以是絕對(duì)或相對(duì)值。

絕對(duì)大?。?/p>

       (1).文本大小設(shè)置指定
       (2).不允許用戶在所有瀏覽器中改變文本大?。ú焕诳捎眯裕?
       (3).絕對(duì)大小在確定了輸出的物理尺寸時(shí)很有用

相對(duì)大?。?
(1).相對(duì)于周圍的元素來設(shè)置大小
(2).允許用戶在瀏覽器改變文本大小

注意：如果沒有規(guī)定字體大小，普通文本（比如段落）的默認(rèn)大小是 16 像素 (16px=1em)。

這里W3C 推薦使用 em 尺寸單位。1em 等于當(dāng)前的字體尺寸。如果一個(gè)元素的 font-size 為 16 像素，那么對(duì)于該元素，1em 就等于 16 像素。在設(shè)置字體大小時(shí)，em 的值會(huì)相對(duì)于父元素的字體大小改變。瀏覽器中默認(rèn)的文本大小是 16 像素。因此 1em 的默認(rèn)尺寸是 16 像素。可以使用下面這個(gè)公式將像素轉(zhuǎn)換為 em：pixels/16=em。

注意：無論是使用em還是pixels，在IE都有可能出現(xiàn)在重設(shè)文本大小時(shí)，會(huì)比正常的尺寸更大或更小的問題，對(duì)于這一點(diǎn)我們綜合使用百分比和em就能很好解決。在所有瀏覽器中均有效的方案是為 body 元素（父元素）以百分比設(shè)置默認(rèn)的 font-size 值：如：body{font-size:100%;} h2{ font-size:1.5em}

更多相關(guān)參考：http://www.divcss5.com/html/h89.shtml

3、了解font-variant屬性

font-variant 屬性設(shè)置小型大寫字母的字體顯示文本，這意味著所有的小寫字母均會(huì)被轉(zhuǎn)換為大寫，但是所有使用小型大寫字體的字母與其余文本相比，其字體尺寸更小。所有主流瀏覽器都支持 font-variant 屬性。它有三個(gè)值：

normal:默認(rèn)值。瀏覽器會(huì)顯示一個(gè)標(biāo)準(zhǔn)的字體。

small-caps:瀏覽器會(huì)顯示小型大寫字母的字體。

inherit:規(guī)定應(yīng)該從父元素繼承 font-variant 屬性的值。不做要求

如：

1: <div style=" font-variant:normal">boy</div>

2: <div style=" font-variant:small-caps">Boy</div><!--字體稍小—>

三、關(guān)于css字體簡寫
如：

1: font-size: 1em;

2: line-height: 1.5em;