css中 font常用的样式属性

最新推荐文章于 2023-11-27 20:30:00 发布

转载最新推荐文章于 2023-11-27 20:30:00 发布 · 362 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xielong/p/7347237.html

本文详细介绍了CSS中设置字体样式的各种方法，包括字体类型、大小、风格、拉伸、加粗及颜色等属性，并通过具体实例展示了不同字体样式的应用效果。

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

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>