⭐ 欢迎来到虫虫下载站！ | 📦 资源下载 📁 资源专辑 ℹ️ 关于我们
⭐ 虫虫下载站
📤 上传资源

📄 css1_3.htm

📁 CSS学习简明教程
💻 HTM
字号:
🔍 
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link rel="StyleSheet" href="../chn.css" type="text/css">
<title>用CSS控制字体</title>
</head>

<body background="../images/background.gif" bgcolor="#FFFFFF">
<!-- Spidersoft WebZIP Ad Banner Insert -->
<TABLE width=100% border="0" cellpadding="0" cellspacing="0">
<TR>
<TD>
<ILAYER id=ad1 visibility=hidden height=60></ILAYER>
<NOLAYER>
<IFRAME SRC="http://www.spidersoft.com/ads/bwz468_60.htm" width="100%" height="60" marginwidth=0 marginheight=0 hspace=0 vspace=0 frameborder=0 scrolling=no></IFRAME>
</NOLAYER>
</TD>
</TR>
</TABLE>
<!-- End of Spidersoft WebZIP Ad Banner Insert-->


<p align="center"><a href="../index.htm"><img src="../images/title.gif" alt="title.gif (2221 bytes)" border="0" WIDTH="380" HEIGHT="56"></a></p>

<p align="center"><font color="#FF0000">CSS入门</font></p>

<table border="0" width="100%">
  <tr>
    <td width="11%" align="right"><img src="../images/blue-rect.jpg" alt="blue-rect.jpg (3374 bytes)" WIDTH="20" HEIGHT="20"></td>
    <td width="89%" bgcolor="#D5F8CD">用CSS控制字体</td>
  </tr>
  <tr>
    <td width="11%" align="right"></td>
    <td width="89%">这一节我们将讨论如何用 CSS 来控制元素中字体的形状, 
    大小, 风格. </td>
  </tr>
  <tr>
    <td width="11%" align="right"><img src="../images/bullet-yellow-s.gif" alt="bullet-yellow-s.gif (911 bytes)" WIDTH="14" HEIGHT="14"></td>
    <td width="89%"><font color="#FF0080">字形</font></td>
  </tr>
  <tr>
    <td width="11%" align="right"></td>
    <td width="89%">CSS 用来控制字形的性质是 <b>font-family</b>. 
    你可以用它来决定任何一个元素中文字的字形. 比如 <pre>  H1, H2, P {font-family: 楷体}
  TD {font-family: arial}</pre>
    <p>这就是说在网页中的 H1, H2, 和 P 的字形是楷体, 而 TD 中的字形是 
    arial. 现在问题是你不知道访客的浏览器里面有没有楷体. CSS 
    允许你给 font-family 多于一个以上的字形, 比如 </p>
    <pre>  H1, H2, P {font-family: 楷体, 黑体, 宋体}</pre>
    <p>上面这个定义可以使得浏览器先用楷体, 如果没有就用黑体...记住每个字形之间要用逗号隔开. 
    </td>
  </tr>
  <tr>
    <td width="11%" align="right"><img src="../images/bullet-yellow-s.gif" alt="bullet-yellow-s.gif (911 bytes)" WIDTH="14" HEIGHT="14"></td>
    <td width="89%"><font color="#FF0080">大小</font></td>
  </tr>
  <tr>
    <td width="11%" align="right"></td>
    <td width="89%">用来控制字体大小的性质是 <b>font-size</b> 
    样式表可以识别许多种确定一种要素尺寸的不同单位：<br>
    <br>
    <font color="#008000">第<font face="宋体">1</font>种， <font face="宋体"><b>points</b>: 
    </font></font><ul>
      <tt><p><font face="宋体">P { font-size: 16pt }</tt> </font></p>
    </ul>
    <p>这条代码告诉浏览器以<font face="宋体">16 points</font>（点）的尺寸显示<font face="宋体">&lt;P&gt;</font>。<br>
    <br>
    <font face="宋体">Points</font>是确定文字尺寸非常好的单位，因为它在所有的浏览器和操作平台上都适用。你唯一需要留意的就是在缺省设置下，<font face="宋体">PC</font>机中显示的字要比<font face="宋体">MAC</font>机中显示的大一些。</p>
    <p><font color="#008000">下一个单位，<font face="宋体"><strong>pixels</strong>:</font></font><ul>
      <tt><p><font face="宋体">P { font-size: 20px }</tt> </font></p>
    </ul>
    <p>从网页设计的角度来说，<font face="宋体">pixel</font>（象素）是一个非常熟悉的单位，它最大的优点就在于所有的操作平台都支持<font face="宋体">pixel</font>单位（而对于其它的单位来说，<font face="宋体">PC</font>机的文字总是显得比<font face="宋体">MAC</font>机中大一些。<br>
    <br>
    而其不利之处在于，当你使用<font face="宋体">pixels</font>单位时，网页的屏幕显示不稳定，字体时大时小，甚至有时根本不显示，而<font face="宋体">points </font>单位则没有这种问题。</p>
    <p>此外你还可以试试em、in、cm、mm、pc、ex等单位</td>
  </tr>
  <tr>
    <td width="11%" align="right"><img src="../images/bullet-yellow-s.gif" alt="bullet-yellow-s.gif (911 bytes)" WIDTH="14" HEIGHT="14"></td>
    <td width="89%"><h3><font color="#FF0080">斜体</font></h3>
    </td>
  </tr>
  <tr>
    <td width="11%" align="right"></td>
    <td width="89%">如果想让字体成为斜体, 要用 <b>font-style</b> 性质, 比如 <pre>  P {font-style: italic}</pre>
    <pre>如果字体风格<font face="宋体">设为normal</font>，它将取消斜体字风格，将字体以正常形式显示。 </pre>
    </td>
  </tr>
  <tr>
    <td width="11%" align="right"><img src="../images/bullet-yellow-s.gif" alt="bullet-yellow-s.gif (911 bytes)" WIDTH="14" HEIGHT="14"></td>
    <td width="89%"><h3><font color="#FF0080">加重</font></h3>
    </td>
  </tr>
  <tr>
    <td width="11%" align="right"></td>
    <td width="89%">用 <b>font-weight</b> 来调节文字的粗细, 比如 <pre>  P {font-weight: bold}</pre>
    <p>font-style 的可能的值是 lighter, normal, bold, bolder bold是字重最常见的应用方式，而normal属性也可以取消加重字体，将字体以正常形式显示。</p>
    <p>你还可以用数值100，200，...900。正常的非加重体的字体值为400，900是最加重的字体参数值。</p>
    <p>下一节我们讨论文字的定位.</td>
  </tr>
  <tr>
    <td width="11%" align="right"></td>
    <td width="89%"></td>
  </tr>
  <tr>
    <td width="11%" align="right"></td>
    <td width="89%"></td>
  </tr>
  <tr>
    <td width="11%" align="right"></td>
    <td width="89%"></td>
  </tr>
  <tr>
    <td width="11%" align="right"></td>
    <td width="89%"></td>
  </tr>
  <tr>
    <td width="11%" align="right"></td>
    <td width="89%"></td>
  </tr>
</table>

<hr>

<p align="right"><a href="css1_2.htm"><img src="../images/back-button-off.gif" alt="上一页--CSS的三种selector" border="0" WIDTH="31" HEIGHT="31"></a><a href="css1_4.htm"><img src="../images/forward-button-off.gif" border="0" alt="下一页--文字间的空间与修饰" WIDTH="31" HEIGHT="31"></a></p>

<p align="center"><a href="index.htm">返回CSS教程目录</a></p>

<p align="center"><a href="../index.htm"><img src="../images/home.gif" alt="home.gif (267 bytes)" border="0" WIDTH="32" HEIGHT="32"><br>
返回主页</a></p>

<layer src="http://www.spidersoft.com/ads/bwz468_60.htm" visibility=hidden id=a1 width=600 onload="moveToAbsolute(ad1.pageX,ad1.pageY); a1.clip.height=60;visibility='show';"></layer>
</body>
</html>

⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -