首页 » 网站建设 »

测试font-weight属性效果

2018年4月5日 / 29次阅读
CSS

CSS中font-weight后面可以接lighter,normal,bold,bolder,还是接100-900数值,默认是normal,400。700对应bold。

麦新杰写了个测试代码,发现现实与理论设计差距很是很大的。

 

测试代码:

<html>
<head>
<title>test</title>
</head>
<body>
<p style="font-weight:100">font-weight:100</p>
<p style="font-weight:lighter">font-weight:lighter</p>
<p style="font-weight:normal">font-weight:normal</p>
<p style="font-weight:bold">font-weight:bold</p>
<p style="font-weight:bolder">font-weight:bolder</p>
<p style="font-weight:900">font-weight:900</p>
</body>
</html>

 

测试结果(Chrome浏览器):

测试font-weight属性

测试font-weight属性

 

浏览器目前只支持两种字体重量效果。

 

一个重要细节:

如果考虑SEO效果,要加重某段文字,还是要用<strong>。

在HTML5中,<b>和<i>尽量用CSS来代替。

HTML官方的一段文字:

You should always bear in mind that the content of a b element may not always be bold, and that of an i element may not always be italic. The actual style is dependent on the CSS style definitions. You should also bear in mind that bold and italic may not be the preferred style for content in certain languages.

You should not use b and i tags if there is a more descriptive and relevant tag available. If you do use them, it is usually better to add class attributes that describe the intended meaning of the markup, so that you can distinguish one use from another.

 

<strong>,加重语气;

<em>,着重文字;

<b>,粗体文字;

<i>,斜体文字。

本文链接:http://www.maixj.net/wz/font-weight-17590
云上小悟 麦新杰(QQ:1093023102)

相关文章

评论是美德

无力满足评论实名制,评论对非实名注册用户关闭,有事QQ:1093023102.


前一篇:
后一篇:

栏目精选

云上小悟,麦新杰的独立博客

栏目


©Copyright 麦新杰 Since 2014 云上小悟独立博客版权所有 备案号:苏ICP备14045477号-1。云上小悟网站部分内容来源于网络,转载目的是为了整合信息,收藏学习,服务大家,有些转载内容也难以判断是否有侵权问题,如果侵犯了您的权益,请及时联系站长,我会立即删除。

网站二维码
go to top