CSS基础学习3-CSS设置字体_unigb-ucs2-h字体下载-优快云博客

本文详细介绍了CSS中设置字体的方法，包括字体族类、样式、变化、浓淡、大小及综合设置，并提供了具体示例。
所有CSS基础学习文档下载地址：http://download.youkuaiyun.com/detail/rongrong_love_lc/9663463
三、CSS设置字体
    *****************************************
    1.font-family   
    2.font-style   
    3.font-variant   
    4.font-weight   
    5.font-size   
    6.font 
    *****************************************

    1.font-family:设置字体族类
        Times New Roman,Garamond,Georgia(这三个字体族属于serif族类；共同点：笔画两端都有“脚”)；
        Trebuchet,Arial,Verdana(这三个字体族属于sans-serif族类，共同点：笔画两端都没有“脚”);
        Courier，Courier New，Andele Mono(这三个字体族属于monospace族类，共同点:所有字符的宽度都一样)。
        (注意:字体有空格的时候，要用引号；优先级最高在前，当设置的字体都没有的时候，会选择设置的族类中的一种[此字体已经安装])
      html文件如下：
        <html>
                <head>
                    <title>Color例子</title>
                    <link rel="stylesheet" type="text/css" href="color.css"/>
                </head>
                <body>
                <h1> 设置文字颜色</h1>
                <h2> 设置文字字体1</h2>   
                <h3> 设置文字字体2</h3>   
                <h4> 设置文字字体3</h4>       
                <p>默认字体颜色</p>
                </body>
            </html>
    csswen文件如下:
      body {background:red url("image1.jpg") no-repeat fixed center}
          h1 {background-color:rgb(0,100,100);
              color:#00ff00; }
          h2 {font-family:arial,verdana,sans-caps;}
          h3 {font-family:"Times New Roman", serif;}
          h4 {font-family:Courier，Courier New，monospace;}


    2.font-style:设置字体样式
        value:normal（正常）、italic（斜体）或oblique（倾斜）；
        html文件同上；
        css文件如下:
          body {background:red url("image1.jpg") no-repeat fixed  center}
          h1 {background-color:rgb(0,100,100);
              color:#00ff00; }
          h2 {font-family:arial,verdana,sans-caps;
              font-style:normal;}
          h3 {font-family:"Times New Roman", serif;
          font-style:italic;}
          h4 {font-family:Courier，Courier New，monospace;
          font-style:oblique;}


    3.font-variant:设置字体变化
        value:normal（正常）或small-caps（小体大写字母）。
        small-caps字体是一种以小尺寸显示的大写字母来代替小写字母的字体。
        如果font-variant属性被设置为small-caps，而没有可用的支持小体大写字母的字体，
        那么浏览器多半会将文字显示为正常尺寸（而不是小尺寸）的大写字母。 
        （测试chrome，IE游览器都是显示正常模式，没有显示小体尺寸）
        html文件如下：
          <html>
              <head>
                  <title>Color例子</title>
                  <link rel="stylesheet" type="text/css" href="color.css"/>
              </head>
              <body>
              <h1> 设置文字颜色</h1>
              <h2> 设置文字字体1ABCDEFG</h2>  
              <h3> 设置文字字体2ABCDEFG</h3>  
              <h4> 设置文字字体3ABCDEFG</h4>      
              <p>默认字体颜色</p>
              </body>
          </html>
          css文件如下
            body {background:red url("image1.jpg") no-repeat fixed center}
            h1 {background-color:rgb(0,100,100);
                color:#00ff00;
                }
            h2 {font-family:arial,verdana,sans-caps;
                font-style:normal;
                font-variant:normal; 
                }
            h3 {font-family:"Times New Roman", serif;
            font-style:italic;
            font-variant:small-caps;}
            h4 {font-family:Courier，Courier New，monospace;
            font-style:oblique;}




    4.font-weight:设置字体的浓淡
        value:normal(正常)、bold(加粗);有些游览器支持100-900之间的数组（以100为一个单位）
    (测试chrome，IE游览器z支持数字)
        html文件如下:   
          <html>
                  <head>
                      <title>Color例子</title>
                      <link rel="stylesheet" type="text/css" href="color.css"/>
                  </head>
                  <body>
                  <h1> 设置文字颜色</h1>
                  <h2> 设置文字字体1ABCDEFG</h2>  
                  <h3> 设置文字字体2ABCDEFG</h3>  
                  <h4> 设置文字字体3ABCDEFG</h4>
              <h5> 设置文字字体4ABCDEFG</h5>
                  <p>默认字体颜色</p>
                  </body>
              </html>
        CSS文件如下:
          body {background:red url("image1.jpg") no-repeat fixed center}
              h1 {background-color:rgb(0,100,100);
                  color:#00ff00;
                  }
              h2 {font-family:arial,verdana,sans-caps;
                  font-style:normal;
                  font-variant:normal; 
              font-weight:normal;
                  }
              h3 {font-family:"Times New Roman", serif;
              font-style:italic;
              font-variant:small-caps;
              }
              h4 {font-family:Courier，Courier New，monospace;
              font-style:oblique;
              }
          h5 {font-weight:900;}
              p {font-weight:bold;}

    5.font-size:设置字体大小
        value:有px、pt、%、em四种单位；（px、pt是将字体设置成固定大小；%、em允许游览者自行调整大小）
    （推荐使用%、em）
        html文件同上;
        css文件如下:
          body {background:red url("image1.jpg") no-repeat fixed center}
              h1 {background-color:rgb(0,100,100);
                  color:#00ff00;
                  }
              h2 {font-family:arial,verdana,sans-caps;
                  font-style:normal;
                  font-variant:normal; 
              font-weight:normal;
              font-size:20px;
                  }
              h3 {font-family:"Times New Roman", serif;
              font-style:italic;
              font-variant:small-caps;
              font-size:20pt;
              }
              h4 {font-family:Courier，Courier New，monospace;
              font-style:oblique;
              font-size:20%;
              }
              h5 {font-weight:900;
              font-size:20em;}
              p {font-weight:bold;}
    6.font:以上属性的缩写
        默认顺序如下：(缺省时为默认值)
    [font-style] | [font-variant] | [font-weight] | [font-size] | [font-family]
        html文件同上;
        css文件如下:
          body {background:red url("image1.jpg") no-repeat fixed center}
              h1 {background-color:rgb(0,100,100);
                  color:#00ff00;
              font:italic bold 120% "Times New Roman",serif;
                  }
              h2 {font-family:arial,verdana,sans-caps;
                  font-style:normal;
                  font-variant:normal; 
              font-weight:normal;
              font-size:20px;
                  }
              h3 {font-family:"Times New Roman", serif;
              font-style:italic;
              font-variant:small-caps;
              font-size:20pt;
              }
              h4 {font-family:Courier，Courier New，monospace;
              font-style:oblique;
              font-size:20%;
              }
              h5 {font-weight:900;
              font-size:20em;}
              p {font-weight:bold;}