logo
搜索
我的图书馆

发文章

发文工具

其他工具

留言交流
搜索
分享

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

 春天没来 2012-05-20

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

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

CSS文字属性(font属性)

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

1.定义字体(font-family)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www./TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www./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>
       ……

进入下一节：文本属性(text)

    本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息，谨防诈骗。如发现有害或侵权内容，请点击一键举报。
    转藏 分享 献花（0）

    来自： 春天没来 > 《下载的资料》

    举报/认领

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多