• 字體相關(guān)屬性

  • font-size 字號(hào)大小

  ont-size屬性用于設(shè)置字號(hào)，該屬性的值可以使用相對(duì)長(zhǎng)度單位，也可以使用絕對(duì)長(zhǎng)度單位。其中，相對(duì)長(zhǎng)度單位比較常用，推薦使用像素單位px，絕對(duì)長(zhǎng)度單位使用較少。具體如下：

關(guān)于長(zhǎng)度單位em 請(qǐng)參考https://www.w3cplus.com/css/px-to-em

• font-family 字體

font-family屬性用于設(shè)置字體。網(wǎng)頁中常用的字體有宋體、微軟雅黑、黑體等，可以同時(shí)指定多個(gè)字體，中間以逗號(hào)隔開，表示如果瀏覽器不支持第一個(gè)字體，則會(huì)嘗試下一個(gè)，直到找到合適的字體

.fontsize{
            font-size: 14px
        }
        .fontfamily{
            font-family:"隸書","微軟雅黑"
        }

<span class="fontsize">
        century 世紀(jì)
    </span>
    <hr>
    <span class="fontfamily">
        dramatic 戲劇性的 激動(dòng)人心的
    </span>

文本效果：

image.png

(1)現(xiàn)在網(wǎng)頁中普遍使用14px+。
(2)盡量使用偶數(shù)的數(shù)字字號(hào)。ie6等老式瀏覽器支持奇數(shù)會(huì)有bug。
(3)各種字體之間必須使用英文狀態(tài)下的逗號(hào)隔開。
(4)中文字體需要加英文狀態(tài)下的引號(hào)，英文字體一般不需要加引號(hào)。當(dāng)需要設(shè)置英文字體時(shí)，英文字體名必須位于中文字體名之前。
(5)如果字體名中包含空格、#、$等符號(hào)，則該字體必須加英文狀 態(tài)下的單引號(hào)或雙引號(hào)，例如font-family: "Times New Roman";。
(6)盡量使用系統(tǒng)默認(rèn)字體，保證在任何用戶的瀏覽器中都能正確顯示。
(7)在 CSS 中設(shè)置字體名稱，直接寫中文是可以的。但是在文件編碼（GB2312、UTF-8 等）不匹配時(shí)會(huì)產(chǎn)生亂碼的錯(cuò)誤。xp 系統(tǒng)不支持 類似微軟雅黑的中文。解決類似問題可以使用
方案1：使用英文來替代。 比如 font-family:“Microsoft Yahei”。
方案2:在 CSS 直接使用 Unicode 編碼來寫字體名稱可以避免這些錯(cuò)誤。使用 Unicode 寫中文字體名稱，瀏覽器是可以正確的解析的。font-family: “\5FAE\8F6F\96C5\9ED1”，表示設(shè)置字體為“微軟雅黑”。
（7）可以使用escape()方法來測(cè)試字體。
（8）各種字體對(duì)照表

• 字體粗細(xì)

由font-weight決定 可以使用的范圍是100-900 其中 400等價(jià)于normal ；700 等價(jià)于bold ，也可以直接使用 normal bold bolder lighter 等屬性 一般使用數(shù)字表示

    .textweight{
            font-weight: bold;
        }

    .textweight{
            font-weight: 700;
        }

效果：

image.png

• 字體風(fēng)格

由font-style 設(shè)置字體風(fēng)格，可用的字體風(fēng)格

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

<span class="textitalic">
        peak 山尖 憔悴
    </span>

效果：

image.png

• 字體綜合設(shè)置

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

選擇器{font: font-style  font-weight  font-size/line-height  font-family;}

.textsynthesis{
           font: italic 700 40px "隸書"
       }


<span class="textsynthesis">
       figure 人物 描繪
   </span>

1. 使用font屬性時(shí)，必須按上面語法格式中的順序書寫，不能更換順序，各個(gè)屬性以空格隔開。
2. 注意：其中不需要設(shè)置的屬性可以省略（取默認(rèn)值），但必須保留font-size和font-family屬性，否則font屬性將不起作用。

以上效果代碼效果如下

image.png

• 文本顏色

  color 屬性用于定義文本顏色

    <span class="textcolor">
        firm 牢固的
    </span>


.textcolor{
            color: rgb(255,0,0);
        }

效果

image.png

color屬性用于定義文本的顏色，其取值方式有如下3種：

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

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

3.RGB代碼，如紅色可以表示為rgb(255,0,0)或rgb(100%,0%,0%)。需要注意的是，如果使用RGB代碼的百分比顏色值，取值為0時(shí)也不能省略百分號(hào)，必須寫為0%。

• 行間距

ne-height屬性用于設(shè)置行間距，就是行與行之間的距離，即字符的垂直間距，一般稱為行高。line-height常用的屬性值單位有三種，分別為像素px，相對(duì)值em和百分比%，實(shí)際工作中使用最多的是像素px，一般情況下，行距比字號(hào)大7.8像素左右就可以了。

• 水平對(duì)齊方式

left：左對(duì)齊（默認(rèn)值）
right：右對(duì)齊
center：居中對(duì)齊
是讓盒子里面的內(nèi)容水平居中， 而不是讓盒子居中對(duì)齊

• 首行縮進(jìn)

text-indent屬性用于設(shè)置首行文本的縮進(jìn)，其屬性值可為不同單位的數(shù)值、em字符寬度的倍數(shù)、或相對(duì)于瀏覽器窗口寬度的百分比%，允許使用負(fù)值, 建議使用em作為設(shè)置單位。1em 就是一個(gè)字的寬度 如果是漢字的段落， 1em 就是一個(gè)漢字的寬度