一.字体系列(font-family)

有很多中系列的字体, 但是对用户来说并不是所有的字体他都可以用.

设置字体使用属性font-family

CSS提供了5中通用的字体:

一个典型的设置:

font-family:Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,\\5B8B\4F53,sans-serif

说明:

• 多种字体之间用,隔开, 如果第一个当前电脑没有就用第二个, 第二个也没有就用第三个....

• 通用的放在最后, 作为备选.

• 由于字体可以继承, 所以可以先用在body上, 当个别元素需要特别的字体的时候, 自己再单独覆盖就可与了.

二. 字体加粗(font-weight)

font-weight属性给文字添加加粗效果.

常见值:

/* Keyword values */
font-weight: normal; /*正常*/
font-weight: bold; /*加粗*/

/* Keyword values relative to the parent */
font-weight: lighter; /*比父容器的细一点*/
font-weight: bolder; /*比父容器粗一点*/

/* Numeric keyword values  值越大越粗 */
font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400;
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;
font-weight: 900;

三. 字体大小(font-size)

设置字体的大小的.

他的单位比较多, 但是最常用的就两个: px, em.

CSS还有一个rem一般用来做响应式布局, 但是兼容性比较差. IE9才开始兼容.

• px, 就是指的物理上的像素. 显示器一个发光点就表示一个像素.

关于em

em是一种长度单位, 相对值, 是相对于当前元素的字体大小来计算的. 如果字体大小是20px, 那么1em=20px, 2em=40px.

但是, 如果我们给font-size设置的使用em, 则就是相对于父元素的字体的大小了.

不可能相对于自己吧.

<style>
p{
    font-size: 20px;
}
span{
    font-size: 2em; /*相对于父容器的字体大小   2 * 20 = 40*/

    display: block;
    width: 4em; /*相对于自己元素的字体的大小 4 * 40 = 160*/
    height: 2em; /* 2 * 40 = 80*/
    border: 1px solid #000;
}
</style>
<p>
    你好abc
    <span>你好abc</span>
</p>

四. 字体风格font-style

文字正常是竖直的, 可以通过这个属性让文本倾斜.

font-style: normal; /*正常*/
font-style: italic; /*倾斜*/
font-style: oblique; /*也是倾斜, 个别字体与italic不一样*/

<span style="font-style: normal;">hello你好</span>
<span style="font-style: italic;">hello你好</span>
<span style="font-style: oblique;">hello你好</span>

五. font属性

声明的所有属性一个一个写是比较麻烦的, font就是对前面几个属性的简写.

/* size | family */
font: 2em "Open Sans", sans-serif;

/* style | size | family */
font: italic 2em "Open Sans", sans-serif;

/* style | variant | weight | size/line-height | family */
font: italic small-caps bolder 16px/3 cursive;

/* The font used in system dialogs */
font: message-box;