CSS字體

Serif 字體

Sans-serif 字體

Monospace 字體

Cursive 字體

Fantasy 字體

1:使用?font-family 屬性??body {font-family: sans-serif;}??

建議在所有 font-family 規(guī)則中都提供一個(gè)通用字體系列。這樣就提供了一條后路,在用戶代理無法提供與規(guī)則匹配的特定字體時(shí),就可以選擇一個(gè)候選字體。

p {font-family: Times, TimesNR, 'New Century Schoolbook',

? ? Georgia, 'New York', serif;}

使用單引號(hào)。只有當(dāng)字體名中有一個(gè)或多個(gè)空格(比如 New York),或者如果字體名包括 # 或 $ 之類的符號(hào),才需要在 font-family 聲明中加引號(hào)。

2:字體風(fēng)格

font-style 屬性最常用于規(guī)定斜體文本。

normal - 文本正常顯示

italic - 文本斜體顯示

oblique - 文本傾斜顯示

p.normal {font-style:normal;}

p.italic {font-style:italic;}

p.oblique {font-style:oblique;}

3:字體變形

font-variant 屬性可以設(shè)定小型大寫字母。

p {font-variant:small-caps;}

4:字體加粗

font-weight 屬性設(shè)置文本的粗細(xì)。關(guān)鍵字 100 ~ 900 為字體指定了 9 級(jí)加粗度。如果一個(gè)字體內(nèi)置了這些加粗級(jí)別,那么這些數(shù)字就直接映射到預(yù)定義的級(jí)別,100 對(duì)應(yīng)最細(xì)的字體變形,900 對(duì)應(yīng)最粗的字體變形。數(shù)字 400 等價(jià)于 normal,而 700 等價(jià)于 bold。

p.normal {font-weight:normal;}

p.thick {font-weight:bold;}

p.thicker {font-weight:900;}

5:字體大小

font-size 屬性設(shè)置文本的大小。普通文本(比如段落)的默認(rèn)大小是 16 像素 (16px=1em)。

h1 {font-size:60px;}

h2 {font-size:40px;}

p {font-size:14px;}

總結(jié):屬性描述

font簡(jiǎn)寫屬性。作用是把所有針對(duì)字體的屬性設(shè)置在一個(gè)聲明中。

font-family設(shè)置字體系列。

font-size設(shè)置字體的尺寸。

font-size-adjust當(dāng)首選字體不可用時(shí),對(duì)替換字體進(jìn)行智能縮放。(CSS2.1 已刪除該屬性。)

font-stretch對(duì)字體進(jìn)行水平拉伸。(CSS2.1 已刪除該屬性。)

font-style設(shè)置字體風(fēng)格。

font-variant以小型大寫字體或者正常字體顯示文本。

font-weight設(shè)置字體的粗細(xì)。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 嘗試和大家一起探討以下問題: view繪制渲染機(jī)制和runloop什么關(guān)系? 所謂的列表卡頓,到底是什么原因引發(fā)的...
    朽木自雕也閱讀 3,174評(píng)論 4 9
  • 字體系列 運(yùn)行圖片 字體風(fēng)格 運(yùn)行圖片 字體加粗 運(yùn)行圖片 字體大小 正常展示
    Lv_0閱讀 295評(píng)論 0 1
  • 字形 1.通用字體系列 - 擁有相似外觀的字體系統(tǒng)組合(如 "Serif" 或 "Monospace")2.特定字...
    convertible閱讀 238評(píng)論 0 0
  • 學(xué)習(xí)CSS的最佳網(wǎng)站沒有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_閱讀 1,189評(píng)論 0 1
  • 不擅長(zhǎng)畫人物畫的我,居然默畫了一個(gè)“她”,腦中想著美麗的人兒,下筆涂上色卻變了模樣,唉。
    僅僅是笠喏閱讀 104評(píng)論 3 2

友情鏈接更多精彩內(nèi)容