前端學習 Css 字型分類

2021-09-07 10:29:58 字數 1295 閱讀 9054

在網頁中將字型分成5大類:

serif(襯線字型)

sans-serif(非襯線字型)

monospace (等寬字型)

cursive (草書字型)

fantasy (虛幻字型)

可以將字型設定為這些大的分類,當設定為大的分類以後,瀏覽器會自動選擇指定的字型並應用樣式。

一般會將字型的大分類,指定為font-family中的最後乙個字型。

doctype html

>

<

html

>

<

head

>

<

meta

charset

="utf-8"

>

<

title

>

title

>

head

>

<

body

>

<

p style

="font-size: 20px;font-family: serif;"

>

日出而作,日入而息。 鑿井而飲,耕田而食。 帝力於我何有哉!ihk

p>

<

p style

="font-size: 20px;font-family: sans-serif;"

>

日出而作,日入而息。 鑿井而飲,耕田而食。 帝力於我何有哉!ihk

p>

<

p style

="font-size: 20px;font-family: cursive;"

>

日出而作,日入而息。 鑿井而飲,耕田而食。 帝力於我何有哉!ihk

p>

<

p style

="font-size: 20px;font-family: fantasy;"

>

日出而作,日入而息。 鑿井而飲,耕田而食。 帝力於我何有哉!ihk

p>

<

p style

="font-size: 20px;font-family: monospace;"

>

日出而作,日入而息。 鑿井而飲,耕田而食。 帝力於我何有哉!ihk

p>

body

>

html

>

效果:

中文區別不打,英文區別很明顯

前端學習 Css 字型

設定文字的大小,瀏覽器中一般預設的文字大小都是16px font size設定的並不是文字本身的大小,在頁面中,每個文字都是處在乙個看不見的框中的我們設定的font size實際上是設定格的高度,並不是字型的大小一般情況下文字都要比這個格要小一些,也有時會比格大,根據字型的不同,顯示效果也不能。當採...

前端學習 Css 字型的幾個屬性學習

可選值 normal,預設值,文字正常顯示 italic 文字會以斜體顯示 oblique 文字會以傾斜的效果顯示 大部分瀏覽器都不會對傾斜和斜體做區分,也就是說我們設定italic和oblique它們的效果往往是一樣的 一般我們只會使用italic 可選值 normal,預設值,文字正常顯示 bo...

前端學習 css

1.內聯 慕課網,超酷的網際網路 it技術免費學習平台,創新的網路一站式學習 實踐體驗 服務及時貼心,內容專業 有趣易學。專注服務網際網路工程師快速成為技術高手!2.嵌入式 嵌入式css樣式必須寫在之間,並且一般情況下嵌入式css樣式寫在之間。慕課網,超酷的網際網路 it技術免費學習平台,創新的網路...