css中 font常用的样式属性

今天我总结一下文本常用的字体样式

1、font常用样式

1）字体类型

  语法：font-family: +字体类型；    如： font-family:宋体; 

2）字体大小

语法：font-size: +字体大小； 如：   font-size:20px;

3）字体风格

语法：font-style: +字体风格；  如：font-style:italic;

4）字体拉伸

 语法：font-stretch: +字体拉伸； 如： font-stretch:expanded;

5）字体加粗

 语法：font-weight: +加粗类型； 如：  font-weight:bolder；

6）字体颜色

 语法：color: +颜色；  如： color:red;

2、文本font的使用

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>css文本常用的字体样式</title>
    </head>

    <style type="text/css">    
      .font1css{
            font-size:15px;         /*字体大小:15px */
            font-style:normal;   /*字体风格：默认 */
            font-stretch:normal;  /* 字体拉伸：默认 */
            font-weight:normal;     /*字体加粗:默认*/
            color:#46DD4A;         /*字体颜色:绿色*/
        }    
        .font2css{
            font-family:宋体;      /**字体类型: 宋体 **/
            font-size:20px;          /*字体大小: 20px */
            font-style:italic;   /*字体风格：斜体*/
            font-stretch:expanded;  /* 字体拉伸：展开 */
            font-weight:bolder;     /*字体加粗：变粗*/
            color:#F45558;           /*字体颜色：红色*/
        }
        .font3css{
            font-family:华文彩云;    /**字体类型：华文彩云 **/
            font-size:25px;          /*字体大小：25px */
            font-style:oblique;      /*字体风格：倾斜 */
            font-stretch:condensed;  /* 字体拉伸：收缩 */
            font-weight:lighter;     /*字体加粗: 变细 */
            color:#4424C8;           /*字体颜色:蓝色*/
        }
    </style>
    <body>
        <span class="font1css">字体风格1：测试文字</span><br/><br/>
         <span class="font2css">字体风格2：测试文字</span><br/><br/>
        <span class="font3css">字体风格3：测试文字</span><br/>
    </body>
</html>

3、结果视图

posted @ 2017-08-11 18:00  小小邪  阅读(1149)  评论(0)    收藏  举报