18.CSS文本样式【上】

                                             第十五章  CSS文本样式

一、字体总汇

二、字体设置

   1、font-size      

     （1）xx-small   }

     （2）x-small    }

     （3）small      }    设置字体的大小，每个值从小到大的固定值

     （4）mediue     }

     （5）large      }

     （6）x-large    }

     （7）xx-large   }

      例、p{

             font-size:50px;   

          }

     （8）smaller    }   设置字体相对于父元素字体的大小

     （9）larger     }

     例、body{

              font-size:50px;      //父元素字体的大小  

         }

         p{

              font-size:smaller;   //比父元素小一点   

         }

     （10）数字+px  

     （11）数字+%  使用父元素字体的百分比大小。    //同(9)

   2、font-variant  设置字体是否以小型大写字母显示

     （1）normal      表示如果以小型大写状态，让他恢复小写状态。

     （2）small-caps  让小写字母以小型大写字母显示。

   3、font-style

     （1）normal    表示让斜体恢复正常状态

     （2）italic    表示使用斜体

     （3）oblique   表示让文字倾斜。区别在没有斜体时使用。

   4、font-weight

     （1）normal                 表示让加粗字体恢复正常

     （2）bold                   粗体

     （3）bolder                 更粗的字体

     （4）lighter                轻细的字体

     （5）100～900之间的数字     600及之后都是加粗，之前不加粗

   5、font-family

     例、p{

            font-family:楷体，微软雅黑，宋体； //如果电脑里没有楷体，则看有没有微软雅黑，以此类推，如果还没有宋体，则系统恢复系统默认字体。

         }

   6、font  字体设置简写组合方式。格式如下：

                   [是否倾斜][是否加粗][是否转小型大写] 字体大小 字体名称

        p{

            font: small-caps italic bold 50px 楷体;   //带[]的元素能互相调整，而把字体大小 字体名称放前面则失效。

        }

三、Web 字体（虽说合一用备用字体来解决用户端字体缺失问题，但总究用户体验不好，且不一定所有用户都安装，

所以CSS提供了Web字体，也就是服务器端字体）

   1、@font-face{

          font-family:abc;

          src:url('字体文件名');

      }

      p{

          font-size:50px;

          font-family: abc;

      }

     

      //英文字体比较小，而中文字体则很大，所以，中文字体想要使用特殊字体可以使用图片，大面积使用中文字体不太建议。