可以改变字体和文本的属性
- font-family 属性规定页面中使用的字体（字体系列）
- font-size属性决定字体大小
- color属性设置文本的颜色
- font-weight属性影响字体的粗细
- text-decoration属性为文本增加更多风格（上划线、下划线、删除线）
字体系列
每个font-family包含一组有共同特征的字体，共有五个字体系列：sans-serif、serif、monospace、cursive和fantasy
- sans-serif字体系列包含没有衬线的字体
- serif字体系列包括有衬线的字体
- monospace字体系列中的字体包含固定宽度，主要用于软件代码示例
- cursive字体系列常用于标题
- fantasy字体系列为包含某种风格的装饰性字体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body{
font-size: 30px;
}
.span1{
font-family:Verdana;
}
.span2{
font-family:Georgia;
}
.span3{
font-family:Courier;
}
.span4{
font-family:comic ;
}
.span5{
font-family:impact;
}
</style>
</head>
<body>
<span class="span1">verdana</span> <br>
<span class="span2">Georgia</span> <br>
<span class="span3">courier</span> <br>
<span class="span4">comic</span> <br>
<span class="span5">impact</span>
</body>
</html>
font-family的默认值为sans-serif ,浏览器会在用户计算机上从font-family中的第一个字体开始向后查看是否有该字体，首选第一个。若有的字体名包含多个单词，则用""，如：“Courier New”。font-family属性实际上是一个字体优先列表，如果在font-family中声明的前几个指定字体都无法找到，浏览器会选择该字体系列的默认字体进行替代。
web字体
是一种向用户浏览器提供字体的方法，避免了用户浏览器没有该字体而影响显示效果的情况，具体操作：首先将字体文件放在web上，然后在css中增加@font-face属性，最后在css中使用font-family名。
@font-face{
font-family:"字体名";
src:url("字体文件的url");
}
h1{
font-family:"设置的字体名",sans-serif;
/*使用了sans-serif作为退路*/
}
可以认为@font-face规则为一个内置的css规则，还有两个常用的规则为@import和@media，@import允许导入其他css文件，@media允许创建特定于某些“媒体”类型的css规则。
ps:这是一个小白的学习笔记，其中内容来自《head first HTML与css》。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
