CSS入门教程-文字属性(font)

发布时间:2019-10-04编辑:脚本学堂
CSS入门教程-文字属性(font)

文字是一个网页的核心部分。CSS可以定义文字的字体、大小和粗细等许多外观。

CSS文字属性(font属性)

font属性在CSS中的使用频率是相当高的。下面我们就来看看font属性都可以做什么。

1.定义字体(font-family)

复制代码 代码如下:

<!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: "黑体", "宋体", "新宋体"; }

这样,当客户的计算机中不存在黑体的时候,它就会以后面的备用字体显示文字。

2.定义文字大小(font-size)

复制代码 代码如下:

……
   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浏览器无法调整"字体大小"选项。

3.定义文字样式(font-style)

复制代码 代码如下:

……
 p.ita { font-style: italic; }
 ……
 <p>我是正常样式</p>
 <p class="ita">我是斜体</p>
       ……   

4.定义文字粗细(font-weigh)

复制代码 代码如下:

……
         p.b { font-weight: bold; }
       ……
 <p>我是正常的字体。</p>
 <p class="b">我是粗体</p>
       ……