html中的字体样式

一.长度单位

       1.像素 px

           像素是屏幕上一个个的小正方形,我们正常看不到，需要放到最大，才能看到

           px是固定的单位，px也是非常常用的单位。

        2.百分比 %

           相对于其父元素的宽高比，是相对单位，一般用来相应式的布局。

        3.em

        相对当前元素的字体大小来改变长度,如果当前元素没有设置字体大小，那么浏览器继承

        祖先元素的字体大小，最终heml根标签元素的默认字体大小是16px。

        4.rem

        相对于根标签元素改变字体的大小，一般用来相应式的布局。

二.颜色单位

    1.在css可以直接使用颜色的单位来表示不同的颜色

       这种单位不推荐使用   单词比较多，不好描述

     2.使用RGB来表示不同的颜色

        R red

        G green

        B blue

        浓度值 0-255

    3.RGBA

    a  透明度   0-1之间数值

       1 不透明  0 完全透明

    4.使用十六进制的rgb来表示颜色，原理和上边rgb原理一样

      十六进制   0-9  abcdfe

      如果数值俩俩重复可以截取一位表示

        常用颜色

          #ccc  灰色   #eee  深灰色

          #foo  红色   #0f0  绿色

          #f60  棕黄色

      rgb（233，97，64）

    5.HSL值   HSLA值

      颜色浓度

      色相

      亮度

      透明度

三.字体的样式

1.color  设置字体颜色，也可以设置其他颜色

        2.font—size   设置字体大小   单位  px，

        3.font-family  可以指定文字的字体

        4.@font-face  自定义字体

四.字体的分类

  在网页中将字体分成5大类：

          serif  ['serif]（衬线字体）

          sans-serif（非衬线字体）

          monospace （等宽字体）

          cursive ['kə:siv]（草书字体）

          fantasy  ['fæntəsi]（虚幻字体）

      可以将字体设置为这些大的分类,当设置为大的分类以后，

        浏览器会自动选择指定的字体并应用样式

      一般会将字体的大分类，指定为font-family中的最后一个字体 ,用来兜底

五.字体的其他样式

    1.设置一个文字大小

 font-size: 40px;

    2.设置一个字体

font-family: fantasy;

  可选值：

          normal  默认值  文字正常显示

          italic  文字斜体  常用的

          oblique  文字斜体

3.设置文字斜体

font-style: oblique;

 可选值：

          normal  默认值  文字正常显示

          italic  文字斜体  常用的

          oblique  文字斜体

    4.设置文字的加粗

  font-weight: 900

可选值

           normal  默认值  文字正常显示

           bold  加粗

         100-900数值   100最细  900最粗

  5.设置一个小型大写字母

font-variant: small-caps;

   6. font简写

 font: bold italic 30px fantasy;

 font简写  必须有设置字体大小（必须倒数第二位）、设置字体（必须在倒数第一位）

六.行间距

 1、行高（line height）  文字占有的实际高度

             可选值

                 1、可以直接设置大小   例如50px,100px

                 2、可以写数值，是字体的倍数

                 3、可以写百分比

         2、单行文本在父元素中垂直居中，把行高和高度设置一样的，

               行高=上间距+文字的大小+下间距

         3、font中也可以指定行高

               font: 38px/2 monospace;  

七.文本样式

1: text-transform 可以用来设置文本的大小写

   可选值：

      none  默认值  正常显示

      uppercase   字母大写

      lowercase     字母小写

      capitalize   首字母大写

2: text-decoration  [dɛkə'reɪʃ(ə)n] 可以用来设置文本的修饰

    可选值：

       none       没有任何修饰线

       underline;   加下划线

       overline     加上划线

       line-through  删除线

3: letter-spacing可以指定字符间距

4: word-spacing可以设置单词之间的距离

5: text-align用于设置文本的对齐方式

    可选值：

      left  默认值  左对齐

      right  右对齐

      center  居中对齐

      justify  两端对齐

6: text-indent 设置首行缩进

   一般用em为单位

7: white-space: ; 设置网页如何处理空白

    可选值：

    normal  默认值 文本正常显示

    nowrap   不换行

8: text-overflow 文本溢出包含元素时发生的事情

    ellipsis   省略号

    none  默认值 文本正常显示

9: text-shadow: h-shadow v-shadow blur color;

   参数

   1.阴影的水平位移距离   必填

   2.阴影的垂直位移距离   必填

   3.阴影的模糊半径       选填  默认是0px

   4.阴影的颜色           选填  默认是根字体的颜色一样

10:vertical-align  设置元素垂直对齐的方式

     1.设置图文对齐

         可选值：

           baseline   默认值   基线对齐

           bottom     下对齐

           top        上对齐

           middle     居中对齐

        只针对图文，表格的垂直对齐

     2.解决图片三像素的问题