属性1:Font-family
Font-family是为了给网页字体设置类型字体。
属性值:
family-name generic(通用)-family :用于某个元素的字体族名称或/及类族名称的一个优先表。默认值:取决于浏览器。
inherit 规定应该从父元素继承字体系列。
通常使用通用字体类型为:"serif"、"sans-serif"、"cursive"、"fantasy"、"monospace";
代码实现:
<!DOCTYPE html>
<html>
<head>
<title>css教程</title>
<style type="text/css">
div{
font-family:monospace,fantasy,cursive,sans-serif,serif;
}
</style>
</head>
<body>
<div>
<p>CSS字体类型</p>
<p>CSS字体类型</p>
<p>CSS字体类型</p>
<p>CSS字体类型</p>
</div>
</body>
</html>
效果实现:

注意事项:
1 多个字体排列,从第一个开始使用,如果第一个没有则向后使用第二种类型字体,如果都没有,则默认使用浏览器字体。
2 为什么有些需要双引号或者单引号?因为有些字体类型命名是分开的,而这如果想要识别,一般加上单引号或者双引号都可以
属性2:font-style
font-style是设置字体风格,主要是斜体样式。
font-style 的值
normal 默认值。浏览器显示一个标准的字体样式。
italic 浏览器会显示一个斜体的字体样式。
oblique 浏览器会显示一个倾斜的字体样式。
inherit 规定应该从父元素继承字体样式。
代码实现:
<!DOCTYPE html>
<html>
<head>
<title>css教程</title>
<style type="text/css">
.l1{
font-style: italic;
}
.l2{
font-style: oblique;
}
.l3{
font-style: normal;
}
</style>
</head>
<body>
<div>
<p class="l1">font-style字体类型1</p>
<p class="l2">font-style字体类型2</p>
<p class="l3">font-style字体类型3</p>
</div>
</body>
</html>
实现效果
注意事项:
1 italic 和 oblique是一样的字体样式
属性3:font-variant
font-variant 可以设定小型大写字母。
font-variant 的值:
normal 默认值。浏览器会显示一个标准的字体。
small-caps 浏览器会显示小型大写字母的字体。
inherit 规定应该从父元素继承 font-variant 属性的值。
代码实现过程
<!DOCTYPE html> <html> <head> <title>css教程</title> <style type="text/css"> .l1{ font-variant:small-caps; } </style> </head> <body> <div> <p class="l1">font-variant字体类型1</p> </div> </body> </html>
实现效果

注意事项:
这种字体风格只是看起来更加的不一般,并不是我们所说的大小写字母。
属性4:font-weight
font-weight是用于设置字体的粗细情况的。
font-weight的值:
normal 默认值。定义标准的字符。
bold 定义粗体字符。
bolder 定义更粗的字符。
lighter 定义更细的字符。
100
200
300
400
500
600
700
800
900
定义由粗到细的字符。400 等同于 normal,而 700 等同于 bold。
inherit 规定应该从父元素继承字体的粗细。
代码实现过程:
<!DOCTYPE html>
<html>
<head>
<title>css教程</title>
<style type="text/css">
.l1{
font-weight: bold;
}
.l2{
font-weight: bolder;
}
.l3{
font-weight: lighter;
}
.l4{
font-weight: 900;
}
.l5{
font-weight: 100;
}
</style>
</head>
<body>
<div>
<p class="l1">font-weight字体类型1</p>
<p class="l2">font-weight字体类型2</p>
<p class="l3">font-weight字体类型3</p>
<p class="l4">font-weight字体类型4</p>
<p class="l5">font-weight字体类型5</p>
</div>
</body>
</html>
实现效果

属性5 font-size
font-size是设置字体大小用的,通常浏览器默认的字体大小为16px,也就是等于1em,值得注意的是font-size可以用百分比和像素来表示。
顶一下
(0)
踩一下
(0)