CSS字體屬性

CSS Fonts屬性用于定義字體系列、大小、粗細(xì)、和文字樣式(如斜體)。

3.1 字體系列

CSS使用font-famliy屬性定義文本的字體系列。

p{ font-family:"微軟雅黑"; }
div { font-family:Arial,"Microsoft Yahei","微軟雅黑"; }
  • 各種字體之間必須使用英文狀態(tài)下的逗號(hào)隔開
  • 一般情況下,如果有空格隔開的多個(gè)單詞組成的字體,加引號(hào)
  • 盡量使用系統(tǒng)默認(rèn)自帶字體,保證在1任何用戶的瀏覽器中都能正確顯示

3.2 字體大小

CSS使用font- size屬性定義字體大小。

p{
    font-size:20px;
}
  • px(像素)大小是我們網(wǎng)頁的最常用的單位
  • 谷歌瀏覽器默認(rèn)的文字大小為16px
  • 不同瀏覽器可能默認(rèn)顯示的字號(hào)大小不一致,我們盡量給一個(gè)明確值大小,不要默認(rèn)大小
  • 可以給body指定整個(gè)頁面文字的大小

3.3 字體粗細(xì)

CSS使用font-weight屬性設(shè)置文字粗細(xì)
實(shí)際開發(fā)推薦寫數(shù)字:
加粗
font-weight:blod;
font-weight:700;
變細(xì)
font-weight:normal;
font-weight:400;

  • 學(xué)會(huì)讓加粗標(biāo)簽(比如h和strong等)不加粗,或者其他標(biāo)簽加粗
  • 實(shí)際開發(fā)時(shí),我們更喜歡用數(shù)字表示粗細(xì)

3.4 文字樣式

CSS使用font-style屬性設(shè)置文本的風(fēng)格。

  • font-style:italic;讓文字傾斜
  • font-style:normal;讓文字不傾斜
p{
    font-style:nomal;
}

注意:平時(shí)很少給文字加斜體,更多的是給斜體標(biāo)簽(例如em、i)改為不傾斜字體。

3.5 字體復(fù)合屬性

字體屬性可以把以上文字樣式綜合來寫,這樣可以更節(jié)約代碼:

body{
    font:font-style font-weight font-size/line-height font-family;
}
  • 使用font屬性時(shí),必須按上面語法格式中的順序書寫,不能更換順序,并且各個(gè)屬性間以空格隔開
  • 不需要設(shè)置的屬性可以省略(取默認(rèn)值),但必須保留font-size和font-falmily屬性,否則font屬性將不起作用。

3.6 字體屬性總結(jié)

  • font-size:(字號(hào))通常用的單位是px像素,必須加單位。
  • font-family:(字體)實(shí)際工作中按照?qǐng)F(tuán)隊(duì)約定來寫字體
  • font-weright:(字體粗細(xì))記住加粗是700或者bold不加粗是normal或者400記住數(shù)字不要跟單位
  • font-style:(字體樣式)記住傾斜是italic 不傾斜是normal 工作中最常用normal
    font:(復(fù)合寫法)1. 字體連寫是有順序的 不能隨意調(diào)換位置 2. 其中字號(hào) 和 字體 必須同時(shí)出現(xiàn)
  • 字體復(fù)合屬性如何寫?里面有什么注意細(xì)節(jié)?
  • 如果讓加粗的文字不加粗顯示,如何讓傾斜的文字不傾斜顯示?
?著作權(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ù)。

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