CSS基礎之字型樣式設定

2021-09-02 02:33:07 字數 1603 閱讀 8502

css字型樣式設定

1.字型樣式設定

字型樣式大致有如下幾種特徵:

字型型別(風格)、字型粗細、字型大小、字型系列

(1)字型型別(風格) font-style

用於設定字型風格,可設定以下值:

① normal:普通字型

② italic:斜體

③ oblique:傾斜字型

(2)字型粗細 font-weight

用於設定字型粗細,可設定以下值:

① normal:正常粗細

② bold:粗體

③ bolder:更粗的字型

④ lighter:更細的字型

⑤ 100~900:步長為100,

(3)字型大小 font-size

用於設定字型大小的,可設定任意正整數和浮點數

預設情況下,幾乎所有的瀏覽器的預設字型大小都為16px. 且chrome等主流瀏覽器不支援12畫素以下的字型。

(4)字型系列 font-family

用於設定字型系列,就是我們通常說的「所用字型」。

設定字型有以下規則:

1.使用中文字型,或帶空格的英文本型名,需要用「引號」將該字型名擴起來

2.單個單詞的字型名稱則無需加上引號。

3.「font-family」可以有多個值,多個值設定的作用是,當瀏覽使用者本地計算機沒有找到設定的第乙個值所表示的字型時,會去找第二個,以此類推,若找到最後乙個值都沒有找到匹配的字型,瀏覽器則會用自己的預設字型。

4.考慮到網頁最終顯示效果在不同裝置上的一致性,我們通常使用的中文字型只有:「宋體」、「微軟雅黑」、「黑體」、「楷體」、「幼圓」等,而目前以「微軟雅黑」為最常用設計字型。

5.常用的英文本型有:「arial」、「helvetica」、「tahoma」、「verdana」、「lucida grande」、「times new roman」、「georgia」等。

2.組合值寫法

(1)給上所有的屬性

我們能將「font」的多個值組合起來寫,比如我們要設定乙個

風格為正常,粗體,20畫素大小,「微軟雅黑」

和風格為斜體,正常粗細,字型大小為22畫素,「宋體」

1.所以在寫「font」屬性組合值的時候可以省略二者之一,以辨識到的值進行設定,另外乙個自動為「normal」,

2.甚至還能省略掉第前兩個值,只保留「font-size」和「font-family」

即:style,weight可只給上任意乙個,或者都給,或者都不給,順序也可以換,但是要在前兩個。

注意:

在「font」組合值的寫法中,只有「font-size」和「font-family」這兩個的值是不能省略的,而且是缺一不可,順序也是要先大小後系列不能變,否則瀏覽器會不認識該值,對該組合值進行報錯。

(3)在font內設定文字行高

「font」屬性組合值的寫法,除了以上所提到的,它還有一種比較不常見,卻還比較實用的寫法,即可直接在「font」屬性內設定文字的行高「line-height」

11 27 CSS字型樣式設定

1.字型樣式設定 字型樣式大致有如下幾種特徵 字型型別 風格 字型粗細 字型大小 字型系列 1 字型型別 風格 font style 用於設定字型風格,可設定以下值 normal 普通字型 italic 斜體 oblique 傾斜字型 2 字型粗細 font weight 用於設定字型粗細,可設定以...

03 CSS樣式之字型樣式

屬性 含義font sytle字型風格 font weight字型粗細 font size字型大小 font family字型樣式 font綜合設定 以上1 font style 字型風格 1 normal 正常字型 一般把傾斜字型變為普通字型 2 italic傾斜字型 不常用 舉例快樂最重要 漂亮...

css字型樣式

注 以下的字型樣式只可在ie中使用。刪除線刪除線 加上背景色 加上背景色 左右翻轉效果 左右翻轉效果 上下翻轉效果 上下翻轉效果 發光文字效果 發光文字效果 發光文字效果 發光文字效果 發光文字效果 發光文字效果 發光文字效果 發光文字效果 發光文字效果 發光文字效果 發光文字效果 發光文字效果 發...