CSS基础学习3-CSS设置字体

来源：互联网发布：网络设计方案图编辑：程序博客网时间：2024/04/30 10:23
所有CSS基础学习文档下载地址：http://download.csdn.net/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;}
0 0