2021年3月12日 font-weight和font-style的属性

font

额外的单词

white 白色

width 宽度

while

属性

font-weight 字体加重

font-weight:bold; 正常字体在变粗
font-weight:normal;正常字体在变细
font-weight:bolder；正常只有一点粗
font-weight:lighter；正常只有一点细

如果想要在网页的一段代码中变成粗体字就要用到以上的css代码。

举例

如果一个页面想要粗体和细体字相互结合显示在页面中，需要用到css的继承关系。

继承关系的特点是，更接近与html指定标签的属性来让css选择继承关系。

继承关系是由远到近

如果body里面既想体现粗体和细体，就要考虑逻辑关系。

如何使用继承关系来确定html代码的粗细以下是例子。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>测试strong</title>
		<style>
			body{
				font-weight: bold;
			}
			h1{
				font-weight: normal;
			}
		</style>
	</head>
	<body>
		<p> Hello guys, this is the method to write bold text.</p>
		<p> Hello guys, this is the method to write bold text.</p>
		<p> Hello guys, this is the method to write bold text.</p>
		<p> Hello guys, this is the method to write bold text.</p>
		<p> Hello guys, this is the method to write bold text.</p>
		<p> Hello guys, this is the method to write bold text.</p>
		<p> Hello guys, this is the method to write bold text.</p>
		<p> Hello guys, this is the method to write bold text.</p>
		<h1> Hello guys, this is the method to write bold text.</h1>
	</body>
</html>

以上html显示的是body里包含p标签和h1标签

通过css选择器来更改p是粗体h1是细

因为css选择器首先选择了body里的所有内容，让所有在body里的内容全部是粗体，在用h1选择器来控制body里的h1显示是细。

倾斜风格

两种倾斜方式

  • italic斜体

    斜体的定义是，把文字通过浏览器显示另外一种带有衬线的斜体字。和普通正常文字有明显的区分。

  • oblique倾斜

    倾斜的定义是，把普通文字稍微倾斜一些但不改变字体的样式。

font-style：italic;
font-style:oblique；

倾斜的风格虽然有两种代码表达方式，但是需要通过浏览器的显示在最终确定你输入的斜体风格，所以你无法控制两种代码的显示方式。

posted on 2021-03-12 23:43  tallish  阅读(251)  评论(0)    收藏  举报

导航