在CSS中,使用font-weight屬性來定義字體粗細。
初學者要注意,字體粗細和字體大小(font-size)是不一樣的,粗細指的是字體的“肥胖”,大小指的是高和寬。大家好好理解一下就很容易區分了。
語法:
font-weight:粗細值;
說明:
粗細值可以取關鍵字和100~900的數值。關鍵字如下表。
字體粗細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>
在浏覽器預覽效果如下: