原创作品,未经许可不得转载
<h1>
的默认字体是比较大的,也比正常字体粗一些。在上一节课中,你已经学会了给它设置font-size
样式改变它的字体大小。但它仍然比正常的字体要粗一些。那么如何才能使它与正常的字体一样粗细呢?
可通过将它的font-weight
样式设为400
,使它与正常字体一样粗细。
<h1 style="font-weight:400">
这是包含在h1中的文本
</h1>
font-weight
的值可以是:100
、200
、300
、400
、500
、600
、700
、800
。值越大,则字体越粗。但是,并不是所有的浏览器都支持所有的值,最常用的、并且所有浏览器都支持的是400
和700
。400
是普通字体的粗细程度,700
是普通粗体的粗细程度。
如果想将正常粗细程度的字体加粗,则将font-weight
的值设为700
:
<div style="font-weight:700">
这是加粗的文本
</div>
另一种写法是,将font-weight
的值设为bold
:
<div style="font-weight:bold">
这是加粗的文本
</div>
font-weight:bold
与font-weight:700
是等效的,并且font-weight:bold
这种写法更常见。
元素的style
属性可以同时设置多个样式。比如,可同时设置字体大小和粗细程度:
<h1 style="font-size:17px;font-weight:400">
这是包含在h1中的文本
</h1>
注意观察语法的书写方式。在多个样式属性之间需用英文分号;
分隔。通常情况下,样式属性的先后位置是可以随意的,比如上面的示例中,可将font-weight
写在font-size
的前面,它们是完全等效的:
<h1 style="font-weight:400;font-size:17px">
这是包含在h1中的文本
</h1>
如果你希望代码更清晰一点的话,可以加入一些空格:
<h1 style="font-weight: 400; font-size: 17px">
这是包含在h1中的文本
</h1>