文字是一个网页的核心部分。CSS可以定义文字的字体、大小和粗细等许多外观。
CSS文字属性(font属性)
font属性在CSS中的使用频率是相当高的。下面我们就来看看font属性都可以做什么。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>演示CSS-脚本学堂</title>
<meta http-equiv="Content-Type"
content="text/html; charset=gb2312" />
<style type="text/css">
<!--
p.song { font-family: "宋体"; }
p.hei { font-family: "黑体"; }
p.eng { font-family: Arial; }
-->
</style>
</head>
<body>
<p class="song">我的字体是宋体</p>
<p class="hei">我的字体是黑体</p>
<p class="eng">My font family is Arial.</p>
</body>
</html>
上面的网页分别为三个段落定义了三种不同的字体。请注意中文的字体要使用引号,而英文字体则不需要。而且在实际应用中你可能遇到这样的问题:网站浏览者的电脑并没有你设置的字体。为了避免这种情况我们可以定义备用字体,方法如下:
p { font-family: "黑体", "宋体", "新宋体"; }
这样,当客户的计算机中不存在黑体的时候,它就会以后面的备用字体显示文字。
……
p.f12 { font-size: 12px; }
p.f16 { font-size: 16px; }
p.f20 { font-size: 20px; }
……
<p class="f12">我12像素</p>
<p class="f16"><span class="16">我16像素</span></p>
<p class="f20"><span class="20">我20像素</span></p>
……
注意不要忘记写上大小的单位,我们这里使用了像素(px)。通常中文网站的文字都定义为12px大,使用像素定义字体大小有明显的优点:精确,方便;不过使用像素定义字体大小也有一个缺陷:用IE浏览器无法调整"字体大小"选项。
……
p.ita { font-style: italic; }
……
<p>我是正常样式</p>
<p class="ita">我是斜体</p>
……
……
p.b { font-weight: bold; }
……
<p>我是正常的字体。</p>
<p class="b">我是粗体</p>
……