基础html字体效果,CSS基础—文字粗细、风格及修饰样式

喜欢ヅ旅行 2023-10-04 16:23 14阅读 0赞

文字粗细、风格和修饰样式的标签分别是font-weight(粗细)、font-style(字体风格)和text-decoration(文字装饰)。

font-weight(尺寸)

font-weight样式用于设置文字的粗细，文字通过粗细之分，可以起到对部分文字强调的作用。font-weight样式值的设置有三种方式：一种是关键字设置法，关键字有normal和bold，normal是正常，bold是加粗；一种是相对粗细值法，相对粗细值法也采用关键字进行设置，关键字有lighter和bolder，lighter相对于父元素设置的文字要细一些，bolder相对于父元素设置的文字要粗一些；再一种是数值法，CSS提供了从100到900的9个数字，这9个数字只能是100的整数倍，文字粗细从100(最细)到900(最粗)。下面的HTML文档展示了font-weight的使用方法。

![28e4af5ce2813159486cb5e0b6d766fe.png][]

在上面的网页代码中，body元素的font-weight被设置为数字800，p元素的font-weight被设置为lighter的要比800细一些，p元素的font-weight被设置为bolder的要比800粗一些。浏览器显示效果如下图所示。

![c7721d3473f8ab4aae54fa27062316e6.png][]

font-style(字体风格)

font-style样式用于设置字体的风格，字体的风格主要分为正常体和斜体。在文字排版中斜体主要应用于引用、强调、唤起注意的作用。font-style样式值的设置采用关键字设置法，关键字有normal、italic、oblique、inherit。

normal用于设置正常字体风格；italic用于设置字体斜体风格；oblique用于设置文字倾斜，oblique与italic的区别是italic只能用于自身有倾斜风格的字体，对于没有倾斜风格的字体，italic不起任何作用。oblique用于文字倾斜，不管采用的字体有没有倾斜风格，都会让元素内的文字倾斜；inherit用于设置从父元素继承字体风格样式。下面的HTML文档展示了font-style的使用。

![7a3cf1b73c85f5ff51155473359d56d4.png][]

在上面的网页代码中，body元素的font-style被设置为斜体风格，其所有子元素如果没有单独设置font-style，将全部采用斜体风格。下图是浏览器显示效果。

![ed57a38d09d16613c03f5fda0e55d594.png][]

ext-decoration(文字修饰)

text-decoration样式用于修饰文字内容，可以实现在文字上添加下划线、在文字之间穿过一条线、在文字上方添加一条线。text-decoration样式值的设置采用关键字设置法，关键字有none、underline、overline、line-through、inherit。

none是默认样式，文字不加任何修饰；underline用于设置在文字下面画一条线；overline用于设置在文字上面画一条线；line-through用于设置在文字中间穿过一条线；inherit用于继承父元素的样式。下面的HTML文档展示了text-decoration的用法。

![c210d8ec62ba4fa80c2bf9fe05a0e011.png][]

在上面的网页代码中，对p元素的文本内容添加了下划线、上划线、中间线修饰样式。下图是浏览器显示效果。

![d140c79c91e39fdf8d30d4e3f4a6e58a.png][]

举报/反馈

[28e4af5ce2813159486cb5e0b6d766fe.png]: https://img-blog.csdnimg.cn/img_convert/28e4af5ce2813159486cb5e0b6d766fe.png
[c7721d3473f8ab4aae54fa27062316e6.png]: https://img-blog.csdnimg.cn/img_convert/c7721d3473f8ab4aae54fa27062316e6.png
[7a3cf1b73c85f5ff51155473359d56d4.png]: https://img-blog.csdnimg.cn/img_convert/7a3cf1b73c85f5ff51155473359d56d4.png
[ed57a38d09d16613c03f5fda0e55d594.png]: https://img-blog.csdnimg.cn/img_convert/ed57a38d09d16613c03f5fda0e55d594.png
[c210d8ec62ba4fa80c2bf9fe05a0e011.png]: https://img-blog.csdnimg.cn/img_convert/c210d8ec62ba4fa80c2bf9fe05a0e011.png
[d140c79c91e39fdf8d30d4e3f4a6e58a.png]: https://img-blog.csdnimg.cn/img_convert/d140c79c91e39fdf8d30d4e3f4a6e58a.png