本文創(chuàng)建于2020年9月，以下為正文：

CSS中有哪些字體屬性呢？

font：復(fù)合屬性。設(shè)置或檢索對(duì)象中的文本特征。

font-style：設(shè)置或檢索對(duì)象中的字體樣式。用于定義字體的風(fēng)格，如：斜體（italic）等等。

font-variant：設(shè)置或檢索對(duì)象中的文本是否為小型的大寫(xiě)字母。

font-weight：設(shè)置或檢索對(duì)象中的文本字體的粗細(xì)。

font-size：設(shè)置或檢索對(duì)象中的字體尺寸，在開(kāi)發(fā)中12px字體最常用。

font-family ：設(shè)置或檢索用于對(duì)象中文本的字體名稱(chēng)序列；用于定義字體的樣式，如黑體，宋體等等。

1.color規(guī)定文本的顏色

定義元素內(nèi)文字顏色

語(yǔ)法：color：顏色名|十六進(jìn)制|RGB

1>預(yù)定義的顏色值，如red,green,blue等。

2>十六進(jìn)制，如#FF0000，#FF6600等。實(shí)際工作中，十六進(jìn)制是最常用的定義顏色的方式。

3>RGB代碼，如紅色可以表示為rgb（255，0，0）或rgb(100%,0%,0%).

如：

div{color:red;}

div{color:#ff0000;}

div{color:rgb(255,0,0);}

div{color:rgba(255,0,0,.5);}

2.font-style 指定文本的字體樣式（正常、斜體）

該屬性設(shè)置使用斜體、傾斜或正常字體。斜體字體通常定義為字體系列中的一個(gè)單獨(dú)的字體。理論上講，用戶(hù)代理可以根據(jù)正常字體計(jì)算一個(gè)斜體字體。

默認(rèn)值 normal

normal 正常字體

italic 斜體字

p{font-style:italic;}

3.font-size 指定文本字體大小

通過(guò)像素來(lái)指定字體大小 1px=1像素

font-size：絕對(duì)單位|相對(duì)單位分別為：px像素|em/%

p{font-size:12px;}

4.font-family定義文本使用某個(gè)字體

默認(rèn)值 由瀏覽器確定

示例：

font-family：Microsoft YaHei;

font-family：“Microsoft YaHei","Simsun”，“SimHei";

5.font-weight 指定文本的粗細(xì)

字體加粗除了用b和strong標(biāo)簽之外，可以使用CSS來(lái)實(shí)現(xiàn)。

normal：默認(rèn)值。定義標(biāo)準(zhǔn)的字符。

bold：定義粗體字符

bolder：定義更粗的字符

lighter：定義更細(xì)的字符

100~900：定義由粗到細(xì)的字符。400等同于normal，而700等同于 old 。

inherit：規(guī)定應(yīng)該從父元素繼承字體的粗細(xì)。

設(shè)置三個(gè)段落的字體的粗細(xì)：

p.nomal{font-weight:normal;}

p.thick{font-weight:bold;}

p.thicker{font-weight:900;}

6.letter-spacing

設(shè)置字的間距(增加或減少)

該屬性定義了在文本字符框之間插入多少空間。由于字符字形通常比其字符要窄，指定長(zhǎng)度值時(shí)，會(huì)調(diào)整字母之間通常的間隔。因此，normal就相當(dāng)于值為0.

如：div{letter-spacing：2px;}

normal：默認(rèn)。規(guī)定字符間沒(méi)有額外的空間。

length：定義字符間的固定空間（允許使用負(fù)值）。

inherit：規(guī)定應(yīng)該從父元素繼承l(wèi)etter-spacing屬性的值。

7.opacity

設(shè)置顏色的透明度，整個(gè)元素都會(huì)透明

默認(rèn)值1，取值為0-1

1為不透明，0為完全透明

示例：

p{opacity：0；}

隱藏一個(gè)元素，完全不顯示，但是會(huì)占空間，只是看不到

p{opacity:1;}

顯示一個(gè)元素 它和rgba中的”a“作用一樣

8.overflow：hidden|auto|scroll

當(dāng)內(nèi)容溢出元素框時(shí)隱藏|自動(dòng)|顯示滾動(dòng)條

visible：默認(rèn)值。內(nèi)容不會(huì)被修剪，會(huì)呈現(xiàn)在元素框之外。

hidden：內(nèi)容會(huì)被修剪，并且其余內(nèi)容是不可見(jiàn)的。

scroll：內(nèi)容會(huì)被修剪，但是瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。

auto：如果內(nèi)容被修剪，則瀏覽器會(huì)顯示滾動(dòng)條以便查看其余內(nèi)容。

inherit：規(guī)定應(yīng)該從父元素繼承overflow屬性的值。

設(shè)置overflow屬性代碼：

div

{

width：150px;

height:150px;

overflow:scroll;

}

9.text-overflow

讓溢出的文字以省略號(hào)顯示

p{height:20px; width:100px;background:#ddd;}

width-space：nowrap; 讓文字在同一行顯示，不換行

overflow：hidden； 溢出部分隱藏

text-overflow：ellipsis； 文字一處部分省略號(hào)顯示，另外一個(gè)值為clip

（ps:如果您覺(jué)得有用，請(qǐng)點(diǎn)贊轉(zhuǎn)發(fā)，讓更多人看到哦）

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的background复合属性顺序_CSS有哪些好用的字体属性？的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。