摘要：
　　这是艺灵带你轻松学会div+css的第十三节课：字体font-family相关属性。这节主要讲解：颜色color、字号font-size、字体font-family、加粗font-weight、行高line-height、文本缩进text-indent......

课前回顾

在前面的12节课程中，从了解html到常用标签的练习再到css属性的练习，我们已经艰难的前行了一段距离，到达终点已经不远了。所以我们今天重拾装备，然后继续去西天取经。

前面我们一直在讲与布局相关的内容，如：宽度width、高度height、边框border、浮动float、清除浮动clear、定位属性position，唯独没有讲到与字体相关的内容。对于一般的看官来说，觉得这非常奇怪。明明字体比这些都简单却放到后面讲，为何？

个人观点：制作网页，要先打框架，也就是布局，如果没有框架，一上来就写内容，势必在后期会浪费非常多的时间。
这就好比盖房子，不知道你们城里人见过盖房子的没有。即使没见过，也应该大致有这些流程：打地基--砌墙--粉墙--......--最后才是人搬进去--自己买家俱进行摆放。
如果一开始，房子还没盖，人和家俱的什么都搬进去，然后在地方画个圈。啊，这个圈就是墙，你们按这个圈给我把房子盖起来吧。估计那些大小工已在背后反复说这人xx。

好，废话不多说，还是看今天的课程吧！

第十三节：字体font-family相关属性

字体属性是最简单的了，因为这个是可视的，我们睁眼就能看到。比如说：购物上淘宝，然后可以看到五颜六色的文字、有的字大，有的字小，有的字粗，有的细，有的字好看，有的就一般般吧。配图一张：

在上面的配图中，我们已经在不知不觉中接触到了：颜色color、字号font-size、字体font-family、加粗font-weight等。是不是发现：原来一张简单的图片，竟然有这么多高科技在里面，内含信息量巨大，宝宝我整个人都不好了!??

1、颜色color

还是之前的步骤，打开自己电脑中的编码软件，比如：dreamweaver，创建及保存等基本步骤略过，仍不会使用的看官看第二节的基础教程。一切准备工作就绪后，我们在新页面中随便打几个字，比如说：“今天又来艺灵这里听课了，现在看到的是黑色的字”。预览后可以看到效果，配图：　

如果我们想实现淘宝那种橙色或其它颜色的字体怎么办呢？

1.1、设置color

<style type="text/css">
　body{
　　color:#f00;/*红色*/
　}
</style>

此时再刷新页面，就可以看到刚才的黑色已经变成了红色了，配图：　

由于我们一个页面中可能有很多内容，像刚才这样直接给body定义颜色的话，默认子元素都会继承。所以通常我们不会这么做，我们会用类选择符来实现我们想要的效果。

1.2、优化版

<!--css部分-->
<style type="text/css">
　/*给红色添加个选择符，方便调用和避免污染全局*/
　.cf00{
　　color:#f00;/*红色*/
　}
</style>
<!--html部分-->
<p class="cf00">
　今天又来艺灵这里听课了，现在用.cf00选择符后，颜色变成了红色
</p>

如果想换其它颜色，改变#f00这个值就可以了。

颜色取值为16进制（HEX）时，必须要保留前面的#！

当然，颜色还有其它几种格式的取值，如下表。

2、字号font-size

颜色我们已经搞定了，接下来讲这个字号。文章最前面的案例中，圈4处的字体比圈1处的大，怎么实现的呢？

2.1、设置字号

<!--css部分-->
<style type="text/css">
　/*给字号添加个选择符，方便调用*/
　.fs-26{
　　font-size:26px;/*26像素*/
　}
</style>
<!--html部分-->
<p class="fs-26">
　现在是font-size:26px;比圈4还要大哦~
</p>

上面代码最终效果图为：　

怎么样，比圈4还大吧！数值可以进行修改，但值不能为负数！有关字号取值部分，参见下表。

2.2、em、rem、%案例

<!--css部分-->
<style type="text/css">
　/*em、rem、%比较*/
　body{
　　font-size:12px;/*12像素*/
　}
　.fs-15em{
　　font-size:1.5em;
　}
　.fs-1rem{
　　font-size:1rem;
　}
　.fs-150b{
　　font-size:150%;
　}
</style>
<!--html部分,em、rem、%比较-->
<p class="fs-15em">单位:em，受限于父级，在父级的基础上进行计算，此时的父级是body，所以最终结果：12*1.5=18px</p>
<p class="fs-1rem">单位:rem，受限于html，默认为16px，如果html设置了大小，就在此基础上进行计算</p>
<p class="fs-150b">单位:%，受限于父级，所以真实大小是：12*1.5=18px</p>
点我查看demo

有关em、rem、%的案例，上面已放了一个demo链接，看官自己体会下区别吧。

3、字体font-family

这是一上比较有争议的话题，好看的字体不免费，免费的还凑合！

多少公司，因未授权使用了一些好看的字体而收到律师的通知函；多少美工，因设计时使用了一些不寻常的字体而让前端开发者不得不用图片字体；多少新手，制作页面时使用了自己电脑中安装的特殊字体，到了别人那里却没有了好看的效果而被老板小批；......唉，说多了都是泪啊！！！

通常情况下，我们会使用微软雅黑。
举个例子：商品的价格前面的那个符号￥怎么打？？
答：在中文输入法的状态下，先按下Shift键不要松，再按下4号数字键即可。
想像永远是美好的，但现实是残酷的！我们得到的结果却是：￥

有同学会说，没区别啊，不都长一样吗？

那请问：为什么一个是两横，一个却是一横，那一横哪儿去了？？？

这。。。。。。

3.1、微软雅黑

<!--css部分-->
<style type="text/css">
　/*价格*/
　.price{
　　font-family:微软雅黑;
　}
</style>
<!--html部分-->
<p class="price">￥9.90元</p>

好了，就是这么神奇！那一横又回来啦！

至于微软雅黑，还有几种版本：英文版Microsoft YaHei、Unicode版\5FAE\8F6F\96C5\9ED1，不管是哪种版本，最终的效果都是一样的。

4、加粗font-weight

就拿这篇文章来说，有些地方的字就比旁边的粗一些。如果不使用属性来控制，默认一些标签就自带加粗的特性，比如说：strong、b、h1~h6。如果同学们不想使用这些标签并且想实现加粗的效果，那就使用我们的font-weight吧！

4.1、font-weight

<!--css部分-->
<style type="text/css">
　/*加粗*/
　.bold{
　　font-weight:bold;
　}
</style>
<!--html部分-->
<p class="bold">变粗了哦</p>

在手册中，还有一些取值，见下表。

至此，字体相关的已讲解完毕，我们最后再来做几个练习题。

5、作业练习

我们来做三道练习题巩固下这节课的内容吧！

一个名叫.box的h3标签，高50px，宽450px，边框为1像素、虚线、红色，字体是微软雅黑，不加粗，大小是14像素，文字颜色是#333，文字水平居中，文字垂直居中。

这题还是比较简单的，除了最后一个要求外，前面的要求都是学过的知识，那我们开始吧！

5.1、作业一的代码

<!--css部分-->
<style type="text/css">
.box{
　width:450px;/*宽度*/
　height:50px;/*高度*/
　border:1px dashed #f00;/*边框，宽1像素，虚线，红色*/
　font-family:"\5FAE\8F6F\96C5\9ED1";/*雅黑字体*/
　font-size:14px;/*字号*/
　font-weight:normal;/*不加粗*/
　color:#333;/*颜色灰色*/
　text-align:center;/*水平居中*/
}
</style>
<!--html部分-->
<h3 class="box">我现在正在用所学知识做案例</h3>

上面代码对应的效果图：　

那如何让文字在垂直方向上也居中呢？？

5.2、行高line-height

语法：line-height:值;

上面代码中的高度是50px，所以此时我们给行高的值为50px就搞定了，即：line-height:50px。最终效果配图：　

怎么样，完成作业了吧！

一个名叫.box2的p标签，高自动，宽450px，填充5像素，上边框为1像素、虚线、红色，右边框为2px、实线、蓝色，下边框为1像素、虚线、黄色，左边框为2像素、实线、紫色，字体是微软雅黑，加粗，大小是14像素，文字颜色是#333，文字水平居左，行高为20像素。

经过刚才的练习，这题应该可以非常快速的完成。

5.3、作业二的代码

<!--css部分-->
<style type="text/css">
.box2{
　width:450px;/*宽度*/
　height:auto;/*高度*/
　padding:5px;/*填充*/
　border-top:1px dashed #f00;/*上边框，宽1像素，虚线，红色*/
　border-right:2px solid #00f;/*上边框，宽2像素，实线，蓝色*/
　border-bottom:1px dashed #ff0;/*上边框，宽1像素，虚线，黄色*/
　border-left:2px solid #f0f;/*上边框，宽2像素，实线，紫色*/
　font-family:"\5FAE\8F6F\96C5\9ED1";/*雅黑字体*/
　font-size:14px;/*字号*/
　font-weight:bold;/*加粗*/
　color:#333;/*颜色灰色*/
　text-align:left;/*水平居左*/
　line-height:20px;/*行高*/
}
</style>
<!--html部分-->
<p class="box2">我现在正在用所学知识做案例二，巩固了：颜色color、字号font-size、字体font-family、加粗font-weight、行高line-height，而且还用上了之前讲过的：宽度width、高度height、边框border、填充padding、类选择器、标签</p>

最终效果为：　

对于作业二，如果把边框去掉、把加粗也去掉，这就像我们平时见的段落文本了。只是左侧没有空两格而已。

5.4、文本缩进

语法：text-indent:值;

一个名叫.box3的p标签，高自动，宽450px，上边填充10像素，右边填充5像素，下边填充10像素，左边填充5像素，无边框，字体是微软雅黑，不加粗，大小是14像素，文字颜色是#333，文字水平居左，行高为20像素。

5.5、作业三的代码

<!--css部分-->
<style type="text/css">
.box3{
　width:450px;/*宽度*/
　height:auto;/*高度*/
　padding:10px 5px;/*填充，上下10，左右5*/
　border:0;/*无边框*/
　font-family:"\5FAE\8F6F\96C5\9ED1";/*雅黑字体*/
　font-size:14px;/*字号*/
　font-weight:normal;/*不加粗*/
　color:#333;/*颜色灰色*/
　text-align:left;/*水平居左*/
　line-height:20px;/*行高*/
　text-indent:2em;/*缩进*/
}
</style>
<!--html部分-->
<p class="box3">现在是不是有点段落的感觉了，左缩进了2em，使用em的好处就是比较智能，字号再改变的时候，缩进距离会自动发生变化；如果使用px，那就需要再手动调整缩进值了。新技能，post到了吗？</p>

最终效果为：　

经过3道作业的练习，同学们此时应该能够看到一个现象：单个的知识点并没有什么大的用途，但当把这些知识点都串联起来的时候，你就会发现效果非常明显，每一个知识点在其它都占据着一定的作用，少一个，效果就差很多。

好了，今天的课程就到此结束，同学们下去后要多练习，特别是之前学习的属性。

6、本文中提到案例

demo地址：
字体font-family相关属性demo
3道作业题demo

----------完----------

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/div/2016-07-16/422.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。