CSS中对字体进行设置

在对字体设置的时候，我们可以设置字体的字体系列，字体的样式，字体的大小，字体加粗，和字体转换。下面我们来一一的对字体的这些设置进行分析。

字体系列:

在CSS中有两种类型的字体系列：

通用的字体系列：拥有相同的 外观的字体系列的组合

特定的字体系列：一个特定的字体系列

似乎大家看到这些定义头脑有点小小的模糊。当然我们学的是实用，那么我们怎样来应用这些字体系列，这用到我们在CSS中一个对字体系列进行设置的属性font-family，对没错就是这个属性。我们来看这例子

<style type="text/css">

 p.serif{font-family: "Times New Roman",Times,serif;}
p.sansserif{font-family: Arial,Helvetica,sans-serif;}
 </style>

我们可以看到是是font-family这个属性后面的值有很多，是的，我们可以写很多的值，也可以写一个值，Time New

Roman(新罗马字体)，Times()，serif;字体的系列有很多，但是我们的浏览器并能同时使用那么多的字体啊，那么我们写那么多干嘛，不要着急，之所以写那么多时因为给浏览器安排一个备胎，当我们的浏览器不支持第一种字体的时候，他就会使用第二种字体来打开文档，第二种不行，就使用第三种。总有一个适合自己的。哈哈。字体系列就为大家说到这里。下面请看字体的样式.

字体样式：

字体的系列是通过font-family这个属性来进行设置。那么字体的样式是通过那么属性来设置。听名字也知道了，对就是利用font-style这个属性来对字体的样式进行设置
 <style type="text/css">
        p.normal{font-style: normal;}
        p.italic{font-style: italic;}
        p.oblique{font-style: oblique;}
  </style>
字体的样式我们可以看做是否设置字体为斜体字，normal为正常的，italic和bolique都是斜体字，我实在是太笨了，没有看出两者之间有什么不同，当然肯定是有不同的，只是区别不大，我感觉都是我们常见的斜体字。

字体的大小：

字体的大小可能说是字体设置里面最应该注意的，因为我们对字体大小的设置，直接影响我们对内容的编排。而且字体的大小设置的时候我们也要不能随便进行设置的。比如你把段落的字体设置的像标题一样好吗。不好。当然我们对字体大小设置之前，我们要理解“大小”。在CSS中对字体大小的设置，大小有绝对大小和相对大小之分。其实绝对大小和相对大小也就是我们对字体大小设置的时候数字后面的单位是不同的。有的时候为了配合浏览器，我们还长将相对大小和百分比之间进行结合，这样用户就可以用自己的浏览器来设置字体的大小。

 <style type="text/css">
       h5{font-size: 40px;}
       h6{font-size: 30px;}
       p{font-size: 14px;}
    </style>在这个地方我们字体大小设置的时候数字后面的单位是px，像素。对像素的大小我相信大家并不陌生了，但是我们也知道像素对字体大大小进行设置很难把握。我们知道浏览器默认的字体大小是多少吗16px。于是我们可以很感性的想到，能不能设置字体的大小时浏览器字体的大小的2,3,1.2倍，之类的。给我们一个参照物，我可以创建一个地球，也就是这样，我们浏览器的字体就是一个参照物。我们可以设置比浏览器字体大几倍的字体

    h1{font-size: 2.5em;}
      h2{font-size: 1.875em;}
      p{font-size: 0.875em;}
    </style>

这样我们就是设置的一个相对的字体。1em=16px，即是浏览器默认的字体的大小，这就是字体大小的相对的设置。

百分比和字体大小的结合：

<style type="text/css">
     body{font-size: 100%;}
     h2{font-size: 2.5em;}
     h3{font-size: 1.875em;}
     p{font-size: 0.875em;}
     </style>

这样做的目的是让我们可以通过调整浏览器的来社会做字体的大小。我们可以看到这一步的是实现是非常简单的，在body这个表签中增加一个font-size：100%;啊，忘记说了，我们字体大小设置的属性是用font-size这个词，非常的抱歉，脑海一直在飞飘，忘记了落地。那么到现在为止，我们已经学习了对字体大小的设置，是否还记得，font-family，font-style，font-size。

字体的加粗：

有的时候我们看别人的界面的时候，发现别人的字体非常的，美观，你也许会惊叹说好粗。在看看自己的那么细，感觉有一种计不如人羞愧。没关系，其实将字体加粗是一种很简单的事情，我们只需要在字体设置的使用应用一下属性

font-weight这个属性就可以，也能让你的字体变粗，而且不要钱哦。闲话不扯了，我们来看这个属性怎样来应用：

 p.n{font-weight: normal;}
    p.l{font-weight: lighter;}
    p.t{font-weight: bold;}
    p.th{font-weight: 900;}

normal自然是正常的字体，lighter亮字体，其实我们设置黑色的字体这个亮不亮关系也不大，bold就是设置粗体字。

当然我们也可以在设置字体粗细的时候用数字来作为属性的值。900其实和bold效果是一样的。

字体的转换：

直奔主题：字体转换用到的属性是font-variant，这个属性的值也有很多，但是我们常用的很少，有normal，有small-

caps；

 p.normal{font-variant: normal;}
 p.samll{font-variant: small-caps;}

这就是font-variant的应用，那么到现在为止我们已经看了。。而且又看了字体的转换，不知道大家还有没有问题。你可能会想小学生一样：老师，I hava a problem。好吧我也有一个问题，这么多的属性能不能写在一起，这个问题很好，我们能不能设置字体的时候就想在设置背景一样，将了一大堆，到最后说一个我们可以用background这个属性来设置我们想设置的所有的属性，当然，在这个地方我们可以利用font，后面加上我们想要设置的属性：

 p.x1{
      font: 15px Arial,sans-serif;
     }
     p.x2{
    font: italic bold 12px/30px Geogria,serif;
     }

这个我们可以称为字体设置的终极属性:大满贯属性

好了，字体设置就为大家说那么多，如果还有兴趣，请继续关注，下篇一样精彩。