一、字体基本样式
首先我们先放置一些文字，基本所有的标签都可以设置字体样式的，这里就使用标签
和
来做示范啦。
O泡时间到！
给我O泡给我O泡，O泡果奶OOO！
图1 基本文字效果
注意，文字属性都是可以继承的，也就是在父元素设置后，其中的子元素都会生效。当在父元素和子元素中都有属性时，遵循就近原则。
1. 字号
字号使用font-size属性：
font-size: 10px; /*设置字号为10px*/
大家在图1可以看到，h1标签有自动放大字体的功能，那么我们不想让字体变得那么大，就可以在css中调整h1的字号大小，我们先设一个20px看一看。
Document
h1{
font-size: 20px;
}
预览后发现h1的字号果然变小了。
图1-1 改变字号后的h1
其它标签的修改字号方式也是一样的，在Chrome浏览器中，可以显示的最小字号是12px，如果设置得更小，依然只会显示12px，其它浏览器会有所不同，在实际开发中一般都使用双数大小的字号。
2. 文字加粗
文字加粗属性使用font-weight属性:
font-weight: normal; /*设置文字不加粗*/
font-weight: bold; /*设置文字加粗*/
在图1可以看到，有的标签默认是加粗字体的，比如
，有的默认是不加粗的，比如
，现在我们修改h1为不加粗，p为加粗。
h1{
font-size: 20px;
font-weight: normal;
}
p{
font-weight: bold;
}
图2-1 修改加粗效果
3. 文字倾斜
文字倾斜属性使用font-style属性:
font-style: italic; /*倾斜*/
font-style: normal; /*不倾斜*/
和
默认都是不倾斜的，我们加上倾斜属性。
h1{
font-size: 20px;
font-weight: normal;
font-style: italic;
}
p{
font-weight: bold;
font-style: italic;
}
图3-1 倾斜效果
4. 字体
字号使用font-family属性：
font-family: '楷体';
/*设置文字为楷体，这里单引号和双引号都是可以的，字体名称一个字都不能差哦！*/
为了方便看出字体，我删掉了之前设置的一些属性，我们把
设为楷体，
设为微软雅黑：
h1{
font-family: '楷体';
font-weight: normal;
}
p{
font-family: "微软雅黑";
}
图4-1 字体设置
注意：不是每台电脑都有全部字体，如果电脑上没有安装你写的字体，就只能显示成默认的啦。有几种字体是安全的，基本所有电脑都能显示：
宋体、楷体、黑体、微软雅黑
(苹果电脑可能没有微软雅黑哦)
其实也有可以让网页在任何电脑上都能显示字体的方法，但是可以的话尽量使用安全字体就好啦。如何避免电脑上没有我们选择的字体呢，我们可以进行多种字体设置，中间用逗号分隔，如下所示：
h1{
font-family: '未知字体','楷体';
font-weight: normal;
}
p{
font-family: "微软雅黑",'楷体';
}
如果我们写的第一个字体电脑上安装了，那就使用此种字体，如果没有安装，可以选择下一种字体，比如上面的代码，
会选择楷体，而
会选择前面的微软雅黑。
图4-2 多种字体
5. 行高
行高使用line-height属性：
line-height: 30px; /*设置行高为30px*/
拿
来说，我们打开Chrome浏览器，右键点击检查，在右侧找到h1标签，中间蓝色加上上下红色的部分就是行高，可以看到目前是40px。
图5-1 40px的行高
我们把它修改成80px：
h1{
line-height: 80px;
font-family: '楷体';
font-weight: normal;
}
图5-2 80px的行高
6. 文字颜色
文字颜色使用color属性(注意是color！没有font的哦！)：
这三种表示方式都是表示红色，之后会详细写三种表示方式的含义和联系。
color:red
color: rgb(255, 0, 0);
color: #ff0000
/*设置文字为红色*/
我们简单修改一下颜色：
h1{
color:red
}
p{
color: rgb(255, 176, 176);
}
图6-1 变色文字
二、复合文字属性
使用font属性(注意顺序，空格分离，加粗和倾斜可以省略，省略后采用默认不倾斜不加粗，颜色只能单独设置)：
font:italic bold 20px/3 '楷体'; /*倾斜 加粗 字号/行高 字体*/
设置一下试试看：
h1{
font:italic bold 20px/3 '楷体';
}
p{
font:20px/3 '楷体';
}
如果觉得《html字体加粗字号为2 【css】文字基本样式（颜色 倾斜 加粗 字号 行高 字体）...》对你有帮助，请点赞、收藏，并留下你的观点哦！
