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

2021-09-07 10:29:58 字數 1838 閱讀 5372

- 可選值:

normal,預設值,文字正常顯示

italic 文字會以斜體顯示

oblique 文字會以傾斜的效果顯示

- 大部分瀏覽器都不會對傾斜和斜體做區分,也就是說我們設定italic和oblique它們的效果往往是一樣的

- 一般我們只會使用italic

可選值:

normal,預設值,文字正常顯示

bold,文字加粗顯示

該樣式也可以指定100-900之間的9個值,

但是由於使用者的計算機往往沒有這麼多級別的字型,所以達到我們想要的效果

也就是200有可能比100粗,300有可能比200粗,但是也可能是一樣的

可選值:

normal,預設值,文字正常顯示

small-caps 文字以小型大寫字母顯示

小型大寫字母:

將所有的字母都以大寫形式顯示,但是小寫字母的大寫,

要比大寫字母的大小小一些。

在css中還為我們提供了乙個樣式叫font,使用該樣式可以同時設定字型相關的所有樣式,可以將字型的樣式的值,統一寫在font樣式中,不同的值之間使用空格隔開

使用font設定字型樣式時,斜體 加粗 小大字母,沒有順序要求,甚至可寫可不寫,如果不寫則使用預設值,但是要求文字的大小和字型必須寫,而且字型必須是最後乙個樣式,大小必須是倒數第二個樣式

實際上使用簡寫屬性也會有乙個比較好的效能

doctype html

>

<

html

>

<

head

>

<

meta

charset

="utf-8"

>

<

title

>

title

>

<

style

type

="text/css"

>

pstyle

>

head

>

<

body

>

<

p>

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

p>

body

>

html

>

看下效果:

第二個示例:

doctype html

>

<

html

>

<

head

>

<

meta

charset

="utf-8"

>

<

title

>

title

>

<

style

type

="text/css"

>

.p1style

>

head

>

<

body

>

<

p class

="p1"

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

p>

body

>

html

>

看下效果:

前端學習 Css 字型

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

前端學習 Css 字型分類

在網頁中將字型分成5大類 serif 襯線字型 sans serif 非襯線字型 monospace 等寬字型 cursive 草書字型 fantasy 虛幻字型 可以將字型設定為這些大的分類,當設定為大的分類以後,瀏覽器會自動選擇指定的字型並應用樣式。一般會將字型的大分類,指定為font fami...

黑馬前端 CSS基礎 CSS 字型屬性 文字屬性

內容來自b站的黑馬程式設計師pink老師 由我收集整理 css fonts 字型 屬性用於定義字型系列 大小 粗細 和文字樣式 如斜體 css 使用 font family 屬性定義文字的字型系列 p div 各種字型之間必須使用英文狀態下的逗號隔開 一般情況下,如果有空格隔開的多個單詞組成的字型,...