1. 犀牛前端部落首页
  2. 新手错误

CSS文字加粗斜体[解决代码]

CSS如何给文字加粗,这是小白常见的问题,今天俺跟大家总结分享。

标签解决办法

一般老的浏览器可能会使用类似<b>或<strong>来加粗文字用<em>来设置斜体,例如以下代码:

<html>
<body>
<strong>加粗字体</strong>
<b>加粗字体</b>
<em>斜体</em>
</body>
</html>

但是此办法语义化不是很好,设置字体加粗推荐使用下面的另外一种方法。

CSS解决

设置font-weight也可以用来给字加粗,而且在实际项目中使用这种方法更多。

参数值

  • normal : 正常的字体。相当于number为400。声明此值将取消之前任何设置
  • bold : 粗体。相当于number为700。也相当于b对象的作用
  • bolder : IE5+ 特粗体
  • lighter : IE5+ 细体
  • number : IE5+ 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

设置font-style为italic可以用来给文字设置斜体,设置斜体在实际项目中用的其实不多,这里只作为学习使用。

  • normal: 默认值。浏览器显示一个标准的字体样式。
  • italic: 浏览器会显示一个斜体的字体样式。
  • oblique: 浏览器会显示一个倾斜的字体样式。
  • inherit: 规定应该从父元素继承字体样式。

实现代码

我们只需要在我们需要设置的选择器中添加样式就行了,例如我想给p标签设置加粗给div设置斜体,可以按照如下代码设置:

p{
font-weight:bold;
}
div{
font-style:italic;
}

总结

推荐使用font-weight 来设置加粗,用font-style来设置斜体,因为语义化更好,html代表的是网页结构,而css代表的是网页样式。

原创文章,作者:犀牛前端部落,如若转载,请注明出处:https://www.pipipi.net/2486.html

发表评论

登录后才能评论