DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS基礎知識 >> 3.5 字體粗細font-weight
3.5 字體粗細font-weight
編輯:CSS基礎知識     

一、font-weight屬性

在CSS中,使用font-weight屬性來定義字體粗細。

初學者要注意,字體粗細和字體大小(font-size)是不一樣的,粗細指的是字體的“肥胖”,大小指的是高和寬。大家好好理解一下就很容易區分了。

語法:

font-weight:粗細值;

說明:

粗細值可以取關鍵字和100~900的數值。關鍵字如下表。

表1 font-weight屬性 font-weight屬性值 說明 normal 默認值,正常體 lighter 較細 bold 較粗 bolder 很粗(其實效果跟bold差不多)

字體粗細font-weight屬性值可以取100、200、…、900這九個值。400相當於正常字體normal,700相當於bold。100~900分別表示字體的粗細,是對字體粗細的一種量化方式,值越大就表示越粗,值越小就表示越細。

對於中文網頁來說,一般僅用到bold、normal這兩個屬性值完全就可以了,粗細值不建議使用數值(100~900)。

舉例1:

在線測試
 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>font-weight屬性</title>
    <style type="text/css">
        #p1{font-weight:lighter;}
        #p2{font-weight:normal;}
        #p3{font-weight:bold;}
        #p4{font-weight:bolder;}
    </style>
</head>
<body>
    <p id="p1">字體粗細為:lighter</p>
    <p id="p2">字體粗細為:normal(正常字體) </p>
    <p id="p3">字體粗細為:bold</p>
    <p id="p4">字體粗細為:bolder </p>
</body>
</html>

在浏覽器預覽效果如下:

舉例2:

在線測試
 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>font-weight屬性</title>
    <style type="text/css">
        #p1{font-weight:100;}
        #p2{font-weight:400;}
        #p3{font-weight:700;}
        #p4{font-weight:900;}
    </style>
</head>
<body>
    <p id="p1">字體粗細為:100</p>
    <p id="p2">字體粗細為:400(normal) </p>
    <p id="p3">字體粗細為:700(bold)</p>
    <p id="p4">字體粗細為:900</p>
</body>
</html>

在浏覽器預覽效果如下:

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved