在 Word 里面实现文字加粗是一件轻而易举的事. 我们直接点击加粗按钮就可以完成. 但是在 CSS 里面没有加粗按钮呀, 那么 CSS 怎么设置字体加粗呢? 下面本篇文章给大家介绍一下, 希望对大家有所帮助.
CSS 怎么设置字体加粗?
一说到在 CSS 里实现加粗, 大家第一反应是不是使用 font-weight 属性. 没错, 这是在 CSS 实现加粗的常用方法.
font-weight 属性用于设置文本的粗细.
font-weight 属性的值可以是: normal , bold, bolder , lighter , number.
normal: 正常的字体, 相当于 number 为 400, 声明此值将取消之前任何设置
bold: 粗体, 相当于 number 为 700, 也相当于 html b 加粗对象的作用
bolder: IE5 + 特粗体
lighter: IE5 + 细体
number: IE5+100|200|300|400|500|600|700|800|900
这个属性我们最常用的值是 bold, 当然你也可以实际需要调整 number 数值达到自己所需的效果.
实例:
HTML 代码:
- <body>
- <span class="yangshi1">
- 我被加粗
- </span>
- <br />
- <span class="yangshi2">
- 我也被加粗了
- </span>
- <br />
我未被加粗
</body>
CSS 代码:
- .yangshi1{ font-weight:bold}
- .yangshi2{ font-weight:900}
效果图:
看到这个效果, 你是否有这样一个疑问: 怎么数值 900 和 bold 的效果差不多呀? bold 不是相当于数值 700 吗? 这是因为加粗作用是由用户端系统安装的字体的特定字体变量映射决定. 系统选择最近的匹配. 也就是说, 用户可能看不到不同值之间的差异.
HTML 常规加粗标签
除了 font-weight 属性之外, 我们还有方法对字体实施加粗吗?
我们先看看下面的代码:
运行:
嘿嘿! 由上图我们可以看到运行效果跟 font-weight 属性差不多喔! 因此我们可以得出: 使用 HTML 标签 < b></b > 或 < strong></strong > 也能达到加粗的效果.
更多 web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/css3/16660.html