css font-weight 属性设置文本字体的粗细

时间:2016-06-27
在CSS中,使用font-weight属性来定义字体粗细,粗细值可以取关键字和100~900的数值,本文章向大家介绍css font-weight属性设置文本字体的粗细,需要的朋友可以参考一下。

css font-weight介绍

CSS中,font-weight属性用来定义字体粗细。font-weight属于css1版,所以所有主流浏览器都支持font-weight属性。

初学者要注意,字体粗细和字体大小(font-size)是不一样的,粗细指的是字体的“肥胖”,大小指的是高和宽。大家好好理解一下就很容易区分了。

语法:

font-weight:粗细值;

粗细值可以取关键字和100~900的数值。如下表。

描述
normal 默认值。定义标准的字符。
bold 定义粗体字符。
bolder 定义更粗的字符。
lighter 定义更细的字符。
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
定义由粗到细的字符。400 等同于 normal,而 700 等同于 bold。
inherit 规定应该从父元素继承字体的粗细。

字体粗细font-weight属性值可以取100、200、…、900这九个值。400相当于正常字体normal,700相当于bold。100~900分别表示字体的粗细,是对字体粗细的一种量化方式,值越大就表示越粗,值越小就表示越细。

对于中文网页来说,一般仅用到bold、normal这两个属性值完全就可以了,粗细值不建议使用数值(100~900)。

css font-weight实例

三段文字设置不同的字体粗细:

<!DOCTYPE html>
<html>
<head>
<style>
p.normal {font-weight:normal;}
p.light {font-weight:lighter;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}
</style>
</head>

<body>
<p class="normal">This is a paragraph.</p>
<p class="light">This is a paragraph.</p>
<p class="thick">This is a paragraph.</p>
<p class="thicker">This is a paragraph.</p>
</body>

</html>

在线运行

相关文章

CSS 教程: CSS Font

CSS 参考手册: font 属性

CSS 参考手册: CSS font-weight