css字體樣式屬性有哪些

css字體樣式屬性有：1、color屬性，用於設定字體顏色；2、font-size屬性，用於設定字號大小；3、font-family屬性，用於設定字體樣式；4 、font-weight屬性，用於設定字體粗細；5、font-style屬性，用於設定字體風格；6、font-variant屬性，用於設定字體變形；7、「@font-face」規則，用於自訂字體。

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

css字型樣式屬性有：

#1、color 字型顏色

定義元素內文字顏色。

語法：

color:颜色名|十六进制|RGB

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

1）預先定義的顏色值，如red， green，blue等。

2）十六進制，如#FF0000，#FF6600，#29D794等。在實際工作中，十六進制是最常用的定義顏色的方式。

3）RGB程式碼，如紅色可以表示為rgb(255,0,0)或rgb(100%,0%,0%)。 

要注意的是，如果使用RGB程式碼的百分比顏色值，取值為0時也不能省略百分號，必須寫為0%。

2、font-size 字號大小

定義元素內文字大小。

語法：

font-size:绝对单位|相对单位

 

 

3、font-family 字體

font- family屬性用於設定字體。

語法：

font-family:具体字体名，字体集

網頁中常用的字體有宋體、微軟雅黑、黑體等，例如將網頁中所有段落文字的字體設定為微軟雅黑，可以使用以下CSS樣式程式碼：

p{ font-family:"微软雅黑";}

可以同時指定多個字體，中間以逗號隔開，表示如果瀏覽器不支援第一個字體，則會嘗試下一個，直到找到合適的字體。

技巧
1. 现在网页中普遍使用14px+。
2. 尽量使用偶数的数字字号。ie6等老式浏览器支持奇数会有bug。
3. 各种字体之间必须使用英文状态下的逗号隔开。
4. 中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。
5. 如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: "Times New Roman";。
6. 尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。

CSS Unicode字型

在 CSS 中設定字型名稱，直接寫中文是可以的。但是在檔案編碼（GB2312、UTF-8 等）不符時會產生亂碼的錯誤。 xp 系統不支援 類似微軟雅黑的中文。

方案一： 你可以使用英文來取代。如 font-family:"Microsoft Yahei"。

方案二： 在 CSS 直接使用 Unicode 編碼寫字型名稱可以避免這些錯誤。使用 Unicode 寫文字體名稱，瀏覽器是可以正確的解析的。 font-family: "\5FAE\8F6F\96C5\9ED1"，表示設定字體為「微軟雅黑」。

可以透過escape() 測試屬於什麼字型。

4、font-weight  字體粗細

字體加粗除了用 b 和 strong 標籤之外，可以使用CSS 來實現，但是CSS 是沒有語義的。

 font-weight屬性用於定義字體的粗細，其可用屬性值：normal、bold、bolder、lighter、100~900（100的整數倍）。

技巧：

 預設normal。數字 400 等價於 normal，而 700 等價於 bold。但是我們更喜歡用數字來表示。  

5、font-style 字體風格

字體傾斜除了用 i 和 em 標籤之外，可以使用CSS 來實現，但是CSS 是沒有語義的。

font-style屬性用於定義字體風格，例如設定斜體、傾斜或正常字體，其可用屬性值如下：

• normal ：預設值，瀏覽器會顯示標準的字體樣式。

• italic：瀏覽器會顯示斜體的字體樣式。

• oblique：瀏覽器會顯示傾斜的字體樣式。

技巧：

 平常我們很少將文字加斜體，反而喜歡為斜體標籤（em，i）改為普通模式。

6、font-variant 字體變形

設定元素中文字為小型大寫字母。

語法:

font-variant:normal|small-caps

font屬性簡寫

font屬性用於對字體樣式進行綜合設置，其基本語法格式如下： 

选择器{font: font-style  font-variant font-weight  font-size/line-height  font-family;}　

使用font屬性時，必須依照上面語法格式的順序書寫，不能更換順序，各個屬性以空格隔開。

注意：其中不需要設定的屬性可以省略（取預設值），但必須保留font-size和font-family屬性，否則font屬性將不起作用。

7、@font-face（CSS3）

@font-face的語法規則

 

相關教學推薦：CSS影片教學

#

以上是css字體樣式屬性有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！