常用CSS字體樣式屬性有哪些

小編給大家分享一下常用CSS字體樣式屬性有哪些，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

10年積累的成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站制作后付款的網(wǎng)站建設(shè)流程，更有古雷港免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

1. CSS字體樣式屬性

1.1 font-size 字體大小

1. font-size屬性用于設(shè)置字號(hào)，該屬性的值可以使用相對(duì)長度單位，也可以使用絕對(duì)長度單位。

   font-size: 14px; // px 絕對(duì)像素單位font-size: 1em; // 相對(duì)父元素字體大小單位// 注：每個(gè)元素必須有字體大小，如果沒有申明，則直接使用父元素的字體大小//    如果沒有父元素（html）則使用基準(zhǔn)字號(hào)，基準(zhǔn)字號(hào)為瀏覽器里設(shè)置的字號(hào)

2. 現(xiàn)在網(wǎng)頁中普遍使用14px+

3. 盡量使用偶數(shù)的數(shù)字字號(hào)。ie6等老式瀏覽器支持奇數(shù)會(huì)有bug。

4. 其中，相對(duì)長度單位比較常用，推薦使用像素單位px，絕對(duì)長度單位使用較少。具體如下：

1.2 font-family字體樣式

1. font-family屬性用于設(shè)置字體。網(wǎng)頁中常用的字體有宋體、微軟雅黑、黑體等，例如將網(wǎng)頁中所有段落文本的字體設(shè)置為微軟雅 黑，可以使用如下CSS樣式代碼：

    p{ 
    	font-family:"微軟雅黑";
    }
    // 注: 可以同時(shí)指定多個(gè)字體，中間以逗號(hào)隔開，表示如果瀏覽器不支持第一個(gè)字體，則會(huì)嘗試下一個(gè)，直到找到合適的字體。

2. 各種字體之間必須使用英文狀態(tài)下的逗號(hào)隔開。

3. 中文字體需要加英文狀態(tài)下的引號(hào)，英文字體一般不需要加引號(hào)。當(dāng)需要設(shè)置英文字體時(shí)，英文字體名必須位于中文字體名之前。

4. 如果字體名中包含空格、#、$等符號(hào)，則該字體必須加英文狀態(tài)下的單引號(hào)或雙引號(hào)，例如font-family: “Times New Roman”;。

5. 盡量使用系統(tǒng)默認(rèn)字體，保證在任何用戶的瀏覽器中都能正確顯示。

6. 一般網(wǎng)頁中用的較多的字體為 arial，此字體是喬布斯研發(fā)的

1.3 CSS Unicode字體

1. 在 CSS 中設(shè)置字體名稱，直接寫中文是可以的。但是在文件編碼（GB2312、UTF-8 等）不匹配時(shí)會(huì)產(chǎn)生亂碼的錯(cuò)誤。xp 系統(tǒng)不支持 類似微軟雅黑的中文。

2. 方案一： 你可以使用英文來替代。 比如 font-family:“Microsoft Yahei”。

3. 方案二： 在 CSS 直接使用 Unicode 編碼來寫字體名稱可以避免這些錯(cuò)誤。使用 Unicode 寫中文字體名稱，瀏覽器是可以正確的解析的。 font-family: “\5FAE\8F6F\96C5\9ED1”，表示設(shè)置字體為“微軟雅黑”。

4. 可以通過escape() 來測(cè)試屬于什么字體。

   體名稱	英文名稱	Unicode 編碼
   宋體	SimSun	\5B8B\4F53
   新宋體	NSimSun	\65B0\5B8B\4F53
   黑體	SimHei	\9ED1\4F53
   微軟雅黑	Microsoft YaHei	\5FAE\8F6F\96C5\9ED1
   楷體GB2312	KaiTiGB2312	\6977\4F53_GB2312
   隸書	LiSu	\96B6\4E66
   幼圓	YouYuan	\5E7C\5706
   華文細(xì)黑	STXihei	\534E\6587\7EC6\9ED1
   細(xì)明體	MingLiU	\7EC6\660E\4F53

注:為了照顧不同電腦的字體安裝問題，我們盡量只使用宋體和微軟雅黑中文字體

1.4 font-weight 字體粗細(xì)

1. 字體加粗除了用 b 和 strong 標(biāo)簽之外，可以使用CSS 來實(shí)現(xiàn)，但是CSS 是沒有語義的。

2. 拓展： strong元素，默認(rèn)加粗。strong元素表示重要的不能忽略的內(nèi)容

   屬性	屬性值	作用
   font-weight:	normal（簡寫400）	不加粗
   	bold（簡寫700）	加粗
   	100~900（100的整倍數(shù)）	數(shù)值越大字體越粗

注：css 數(shù)字 400 等價(jià)于 normal，而 700 等價(jià)于 bold。 但是我們更喜歡用數(shù)字來表示。

1.5 font-style 字體風(fēng)格

1. 字體傾斜除了用 i 和 em 標(biāo)簽之外，可以使用CSS 來實(shí)現(xiàn)，但是CSS 是沒有語義的。

2. 拓展： i元素表達(dá)的語言：這一塊文本為特殊的文本，實(shí)際使用的時(shí)候通常用它表示一個(gè)圖標(biāo)（icon）

   屬性	屬性值	作用
   font-style:	normal	默認(rèn)值，瀏覽器會(huì)顯示標(biāo)準(zhǔn)的字體樣式
   	italic	瀏覽器會(huì)顯示斜體的字體樣式
   	oblique	瀏覽器會(huì)顯示傾斜的字體樣式

注：平時(shí)我們很少給文字加斜體，反而喜歡給斜體標(biāo)簽（em，i）改為普通模式

1.6 font 文字屬性速寫 (重點(diǎn))

1. font屬性用于對(duì)字體樣式進(jìn)行綜合設(shè)置，其基本語法格式如下：

   選擇器{
   	font: font-style font-weight font-size/line-height font-family;}// font:style weight size/行高 字體類型，大小和類型不能省略

2. 使用font屬性時(shí)，必須按上面語法格式中的順序書寫，不能更換順序，各個(gè)屬性以空格隔開。

3. 注意：其中不需要設(shè)置的屬性可以省略（取默認(rèn)值），但必須保留font-size和font-family屬性，否則font屬性將不起作用。

1.7 letter-spacing 字體間距

1. letter-spacing就是文字與文字間的間距，值可以負(fù)數(shù)，默認(rèn)值normal

   p{
   	letter-spacing : 2px;}

1.8 text-decoration 文本修飾：加線

1. line-through：穿過文字，表示中間加條線

2. overline：上面加條線（少用）

3. underline：下面加條線

4. none：表示沒有線，去掉線

5. 拓展： del、s元素默認(rèn)中間加線；del元素表示廢棄、錯(cuò)誤的內(nèi)容；s元素表示過期的內(nèi)容；a元素默認(rèn)下面加線，表示超鏈接

1.9 text-indent 首行文本縮進(jìn)

1. px：縮進(jìn)多少像素

2. em：縮進(jìn)幾個(gè)字體（中英文縮進(jìn)寬度值一樣）

2.0 line-height 文本行高/垂直居中

1. 每行文本的高度，該值越大，每行文本的值越大

2. 設(shè)置行高為容器高度，可以讓單行文本垂直居中，容器高度為如：height：50px

3. 行高可以設(shè)置為純數(shù)字，表示相對(duì)于當(dāng)前元素的字體大小。如取值1.5:行高為文字的1.5倍，這樣文字在放大的時(shí)候，行高也在變大，不會(huì)出現(xiàn)文字重疊現(xiàn)象

2.1 letter-spacing 文字間隙

1. em：每個(gè)文字間隔幾個(gè)字體寬度

2. px：每個(gè)文字間隔幾個(gè)像素

2.2 text-align 文字、行盒、行塊盒水平排列方式

1. left：靠左，默認(rèn)靠左排列

2. center：居中

3. right：靠右

2.3 網(wǎng)頁的最小和最大寬度

1. 設(shè)置在body元素的css里

2. min-width: 1000px 最小像素

3. max-width: 1500px 最大像素

以上是“常用CSS字體樣式屬性有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

本文名稱：常用CSS字體樣式屬性有哪些
標(biāo)題URL：http://muchs.cn/article34/jcjjse.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機(jī)網(wǎng)站建設(shè)、云服務(wù)器、品牌網(wǎng)站建設(shè)、網(wǎng)站策劃、電子商務(wù)、響應(yīng)式網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)