零基礎(chǔ)教你學(xué)前端——64、CSS字體和字號(hào)

時(shí)間：2023-09-01 15:54:02 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-09-01 15:54:02 來(lái)源：網(wǎng)站運(yùn)營(yíng)

零基礎(chǔ)教你學(xué)前端——64、CSS字體和字號(hào)：為你的網(wǎng)站選擇正確的字體，能夠提高用戶(hù)瀏覽網(wǎng)站的體驗(yàn)——恰當(dāng)?shù)淖煮w可以為你的品牌創(chuàng)造一個(gè)強(qiáng)大的視覺(jué)標(biāo)識(shí)。使用一種易于閱讀的字體，比如為字體選擇正確的顏色和文字大小，都是非常重要的。（做后期時(shí)，此處根據(jù)文案，放置一些有漂亮字體的網(wǎng)頁(yè)，logo 什么的）

我們首先來(lái)了解如何設(shè)置字體。（此時(shí)字體兩個(gè)字高亮）

在 CSS 中，我們使用 font-family 屬性來(lái)指定一個(gè)文本的字體。屬性值是一個(gè)字體的名稱(chēng)。

字體都有哪些名稱(chēng)呢？要回答這個(gè)問(wèn)題，就需要了解一下字體的知識(shí)了。

在 CSS 中，英文字體有五類(lèi)：

第一類(lèi)，Serif[?ser?f]：有襯線(xiàn)字體，在每個(gè)字母的邊緣都有一個(gè)小筆劃。它們創(chuàng)造了一種正式和優(yōu)雅的感覺(jué)。比如：Times New Roman[?r??m?n]，Georgia[?d???d??]，Garamond 。（此時(shí)需要展示字體的樣子）

第二類(lèi)，Sans-serif：無(wú)襯線(xiàn)字體，有干凈的線(xiàn)條，也就是不附帶小筆畫(huà)。它們創(chuàng)造了一種現(xiàn)代和簡(jiǎn)約的外觀(guān)。比如 Arial，Verdana，Helvetica。這個(gè) Helvetica 字體還被拍成了一步電影——《傳奇字體 Helvetica》。

第三類(lèi)，Monospace：?jiǎn)慰崭褡煮w，這里所有的字母都有相同的固定寬度，因此又叫等寬字體，它們創(chuàng)造了一種機(jī)械的外觀(guān)。一般我們?cè)诖a編輯器中會(huì)使用這些字體。比如 Courier New，Lucida Console，Monaco。

第四類(lèi)，Cursive：草書(shū)字體，模仿人類(lèi)的手寫(xiě)體。比如 Brush Script MT，Lucida Handwriting。

第五類(lèi)，F(xiàn)antasy：幻想字體，是裝飾性、娛樂(lè)性字體。比如 Copperplate，Papyrus

相對(duì)于英文字體，你可能更熟悉中文字體。在 CSS 中，中文字體名稱(chēng)都有哪些呢？

在中文的網(wǎng)站中，比較通用的中文字體有兩個(gè)：Microsoft Yahei，微軟雅黑；PingFang SC，蘋(píng)方簡(jiǎn)。分別應(yīng)用于 Windows 系統(tǒng)和 Mac 系統(tǒng)。

這里你可能會(huì)問(wèn)，中華文化博大精深，中文字體也琳瑯滿(mǎn)目，怎么只用這兩個(gè)字體呢？因?yàn)樵贑SS里設(shè)置的字體名稱(chēng)，得需要用戶(hù)的電腦里存在這個(gè)字體。如果你想使用任意的字體，我們?cè)诤竺娴恼n程里給你答案。如何查看自己的電腦里都安裝了什么字體呢？

以 chrome 瀏覽器為例，點(diǎn)擊這個(gè)圖標(biāo)，再點(diǎn)擊設(shè)置，選擇外觀(guān)，自定義字體。這里有標(biāo)準(zhǔn)字體、有襯線(xiàn)字體、無(wú)襯線(xiàn)字體、等寬字體的設(shè)置。點(diǎn)擊任何一個(gè)下拉框，就能看到自己電腦里的字體了。

我們來(lái)做個(gè)例子。

創(chuàng)建一個(gè)文件夾 006-css-fonts，在文件夾里創(chuàng)建一個(gè) font-family-size.html 文件，構(gòu)建基本代碼，添加 h1，h3，p 三個(gè)元素，分別填入一些文本。

再創(chuàng)建一個(gè) mystyle-1.css 文件，定義 h1 選擇器，聲明樣式 font-family: PingFang SC。定義 h3 選擇器，聲明樣式 font-family: Copperplate。定義 p 選擇器，聲明樣式 font-family: 華文仿宋。

再次強(qiáng)調(diào)，這里的字體名稱(chēng)，一定要在網(wǎng)頁(yè)瀏覽者自己的電腦里存在才可以生效！

在頁(yè)面里引入樣式文件。

在瀏覽器中預(yù)覽頁(yè)面，標(biāo)題和段落都應(yīng)用了不同的字體。

你可能會(huì)問(wèn)，我在CSS里設(shè)置的字體名稱(chēng)，一旦用戶(hù)的電腦里沒(méi)有怎么辦？我們可以給他定義幾個(gè)樣式備選。

比如，h3 的 Copperplate，假設(shè)用戶(hù)的電腦里不存在，可以在前面再添加一個(gè) Brush Script MT 字體，用逗號(hào)分隔開(kāi)。

我們看，文字應(yīng)用了 Brush Script MT 字體。

假設(shè)這個(gè)字體也不存在，在前面再添加一個(gè)字體 Courier New。

我們?cè)倏?，文字?yīng)用了 Courier New 字體。

這說(shuō)明，先定義的字體優(yōu)先起作用。如果定義的字體用戶(hù)電腦里都不存在，瀏覽器就使用默認(rèn)字體了。當(dāng)然，默認(rèn)字體也可以自定義設(shè)置。

一般情況下，多個(gè)單詞名稱(chēng)的字體，推薦使用單引號(hào)或者雙引號(hào)引起來(lái)。

接下來(lái)，我們來(lái)給字體設(shè)置字號(hào)。

文本字號(hào)，也就是文本的大小，在網(wǎng)頁(yè)設(shè)計(jì)中是很重要的，它可以使網(wǎng)頁(yè)文字布局有層次感，便于閱讀，增強(qiáng)用戶(hù)體驗(yàn)。

在 CSS 中，通過(guò) font-size 屬性設(shè)定文本的大小。屬性值可以是絕對(duì)大小，也可以是相對(duì)大小。

絕對(duì)大小。將文本設(shè)置為指定的大小，不允許用戶(hù)在所有的瀏覽器中改變文字的大小。

舉個(gè)例子，如果我視力不佳，把瀏覽器的字號(hào)設(shè)置的比較大時(shí)，頁(yè)面的字號(hào)會(huì)同比放大。

在 p 元素上聲明樣式 font-size: 20px。

這里需要提示一下：如果不指定字體大小，正常的文本，比如段落，會(huì)繼承祖先元素的大小，如果祖先元素沒(méi)有設(shè)置字體大小，就會(huì)使用瀏覽器設(shè)置的默認(rèn)字號(hào)，大小為16px。

回到瀏覽器，你會(huì)發(fā)現(xiàn)，無(wú)論用戶(hù)把瀏覽器的字號(hào)設(shè)置為多大，段落的文字始終都是 20 像素。

這難道告訴我們，不要把元素的大小設(shè)置為絕對(duì)值嗎？當(dāng)然不是了，當(dāng)頁(yè)面輸出的物理尺寸已知時(shí)，絕對(duì)大小是很常用的。那相對(duì)大小如何設(shè)置呢？

相對(duì)大小，也就是相對(duì)于周?chē)氐拇笮?，使?em 這個(gè)單位來(lái)設(shè)置。一般情況下，會(huì)根據(jù)繼承下來(lái)的父元素尺寸計(jì)算得到。

比如，這個(gè)頁(yè)面的 p 元素的父元素是 body，我們給 body 聲明 font-size 為 16px，給 p 元素聲明 font-size 為 2em。轉(zhuǎn)化為絕對(duì)大小為 2 乘以 16px 等于 32px。

在瀏覽器里觀(guān)察結(jié)果，用尺子量一下，果然是 32 像素！

假如在 body 元素里沒(méi)有聲明 font-size，p 元素文字大小就相對(duì)于瀏覽器默認(rèn)的字號(hào)——也就是 16 px。所以，2em 大小還是 32px。

在瀏覽器里驗(yàn)證一下，字體大小果然沒(méi)有發(fā)生變化！

當(dāng)我們調(diào)整瀏覽器的字號(hào)時(shí)，段落的文本變大了！

這說(shuō)明，相對(duì)單位允許用戶(hù)在瀏覽器中改變文本大小。

除了em，還可以使用百分比 (%) 這個(gè)單位，它是相對(duì)于父元素的大小來(lái)計(jì)算文本尺寸的。使用方法和效果與 em 類(lèi)似。

比如定義 p 元素的 font-size 為 200%。

此時(shí)，段落文字的大小依然是 32 像素。

剛才我們提到，em 表示的文本大小，是根據(jù)繼承下來(lái)的父元素大小計(jì)算得到的。如果元素嵌套層數(shù)太多，父元素 font-size 的值也用 em 來(lái)設(shè)置，父元素的父元素 font-size 的值還是用 em 來(lái)設(shè)置，這樣計(jì)算起來(lái)就比較麻煩了。有沒(méi)有更好的解決方案呢？

答案就是：使用 rem 這個(gè)相對(duì)單位。rem，全稱(chēng)是 Relative to the root element，相對(duì)于根元素。這樣，我們就不用像 em 那樣，計(jì)算那么多祖先元素的大小了。

那么，html 文檔哪個(gè)元素是根元素呢？

沒(méi)錯(cuò)，就是 html 元素，

在樣式里，定義 html 元素，聲明樣式 font-size: 16px。注釋上一個(gè)代碼，聲明 font-size 屬性，值為 2rem。

查看效果，段落文字的大小仍然為 32 像素。




文章配套視頻鏈接：https://www.bilibili.com/video/BV1oU4y1278g?p=64