CSS3——字體樣式屬性


1.font-size:字號大小

  font-size 屬性用於設置字號,該屬性的值可以使用想相對長度單位,也可以使用絕對長度單位。

相對長度單位 說明
em 相當於當前對象內文本的字體尺寸
px 像素,最常用,推薦使用

 

絕對長度單位 說明
in 英寸
cm 厘米
mm 毫米
pt

  其中,相對長度單位比較常用,推薦使用像素單位 px,絕對長度單位使用較少。

 

2.font-family:字體

  font-family 屬性用於設置字體。網頁中常用的字體有宋體、微軟雅黑、黑體等。如將網頁中所有段落文本的字體設置為微軟雅黑:

 

 

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

 

 

   使用 font-family 設置字體時,需要注意一下幾點:

  *  各種字體之間必須使用英文狀態下的逗號隔開

  *  中文字體需要加英文狀態下的引號,英文字體字體一般不需要引號。當設置英文字體時,英文字體名必須位於中文字體名之前:

 

 

   *  如果字體名中包含空格、#、$等符號,則該字體必須加英文狀態下的單引號或雙引號:

 

 

   *  盡量使用系統默認字體,保證在任何用戶的瀏覽器中都能正確顯示。

 

3.font-weight:字體粗細

font-weight可用屬性值

描述
normal 默認值。定義標准的字符
bold 定義粗體字符
bolder 定義更粗的字符
lighter 定義更細的字符
100 ~ 900(100的整數倍) 定義由細到粗的字符。其中 400 等同於 normal,700 等同於 bold,值越大字體越粗

  實際中,常用的 font-weight 的屬性值為 normal 和 bold,用來定義正常或加粗顯示的字體。

 

4.font-style:字體風格

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

  *  normal:默認值,瀏覽器會顯示斜體的字體樣式

  *  italic:瀏覽器會顯示斜體的字體樣式

  *  oblique:瀏覽器會顯示傾斜的字體樣式

  其中 italic 和 oblique 都用於定義斜體,兩者在現實效果上並沒有本質區別,但實際中常使用 italic。

 

5.font:綜合設置字體樣式

  font 屬性用於對字體樣式進行綜合設置,其基本語法格式為:

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

  使用 font 屬性時,必須按上面語法格式中的順序書寫,各個屬性以空格隔開。其中 line-height 指的是行高:

 

 

   等價於

 

 

   其中不需要設置的屬性可以省略(取默認值),但必須保留 font-size 和 font-family 屬性,否則 font 屬性將不起作用。

 

6.@font-face屬性

  @font-face 屬性是 CSS3 的新增屬性,用於定義服務器字體。通過 @font-face 屬性,開發者可以在用戶計算機未安裝字體時,使用任何喜歡的字體。使用 @font-face 屬性定義服務器字體的基本語法格式如下:

  @font-face {

    font-family: 字體名稱;

    src: 字體路徑;

  }

  其中,font-family 用於指定該服務器字體的名稱,該名稱可以隨意定義,src 屬性用於指定該字體文件的路徑。

  使用服務器字體的步驟:

  (1)下載字體,並存儲到相應的文件夾中

  (2)使用 @font-face 屬性定義服務器字體

  (3)對元素應用 “font-family” 字體樣式

 

 

 

 

7.word-wrap屬性

  word-wrap屬性用於實現長單詞和 URL 地址的自動換行,其基本語法格式:

  選擇器{word-wrap: 屬性值;}

word-wrap屬性值

描述
normal 只在允許的斷字點換行(瀏覽器保持默認處理)
break-word 在長單位或 URL 地址內部進行換行

 

 

 

 

   由圖可看出,當瀏覽器默認處理時段落文本中的 URL 地址會溢出邊框,當 word-wrap 屬性值為 break-word 時,URL 地址會沿邊框自動換行。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM