字号设置
font-size 设置字体的大小，使用合法的尺寸单位- 常见单位有：px、em、rem、%…
- 当没有设置字号时，浏览器会添加默认字号，一般是16px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字号设置</title>
<style type="text/css">
</style>
</head>
<body>
<div>字号设置</div>
<div style="font-size: 14px;">字号设置1</div>
<div style="font-size: 1em;">字号设置2</div>
<div style="font-size: 1.5rem;">字号设置3</div>
<div style="font-size: 200%;">字号设置4</div>
</body>
</html>
字体设置
font-family:字体 [, 字体2, …] 设置字体系列- 当没有设置字体时，默认使用系统的“微软雅黑”字体
- 当设置的字体没有生效时，会显示默认字体
- 可以设置多种字体，用“，”隔开，当浏览器不支持第一个字体时，就会尝试下一个，直到找到可识别的字体。如果都不能识别，就会使用默认字体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体设置</title>
<style type="text/css">
div{font-size: 30px;}
#div2{font-family: "宋体";}
#div3{font-family: "楷书";}
</style>
</head>
<body>
<div id="div1">字体设置1</div>
<div id="div2">字体设置2</div>
<div id="div3">字体设置3</div>
</body>
</html>
字体粗细
font-weight:字体粗度值 设置字体粗细
字体粗度值：
1、数字：100-900， 没有单位，一般设置成整百，数字越大，字体越大
2、normal：默认值。相当于数字400，浏览器会显示一个标准的字体
3、bold：定义粗体字符，相当于数字700
4、bolder：定义更粗的字符，比继承字体粗
5、lighter：定义更细的字符，比继承字体细
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体粗细</title>
<style type="text/css">
div{font-size: 50px;}
</style>
</head>
<body>
<div style="font-weight: 100">字体粗细1</div>
<div style="font-weight: 400">字体粗细2</div>
<div style="font-weight: 700">字体粗细3</div>
<div style="font-weight: 900">字体粗细4</div>
<div style="font-weight: normal">字体粗细5</div>
<div style="font-weight: bold">字体粗细6</div>
<div style="font-weight: bolder">字体粗细7</div>
<div style="font-weight: lighter">字体粗细8</div>
</body>
</html>
字体风格
font-style:样式取值 设置字体为倾斜效果
样式取值：
1、italic：表示倾斜效果
2、oblique：表示正常与倾斜状态的中间倾斜效果，偏倾斜字体
3、normal：表示正常的字体，经常用来重置字体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体风格</title>
<style type="text/css">
div, i{font-size: 50px;}
</style>
</head>
<body>
<div style="font-style: italic">字体风格1</div>
<div style="font-style: oblique">字体风格2</div>
<i style="font-style: normal">字体风格3</i>
</body>
</html>
字体样式重置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体样式重置</title>
<style type="text/css">
body{font-size: 16px; font-family: "微软雅黑";
color: #333;}
b{font-weight: normal;}
i{font-style: normal;}
</style>
</head>
<body>
<div>字体样式重置div</div>
<p>字体样式重置p</p>
<b>字体样式重置b</b><br>
<strong>字体样式重置strong</strong><br>
<i>字体样式重置i</i><br>
<em>字体样式重置em</em>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
