Dreamweaver 教程-CSS文字属性(font属性)

时间：2014-07-22 10:29
来源：下载吧
编辑：xfront

Dreamweaver CC 2015

AdobeDreamweaverCC2015官方中文版是Adobe公
软件大小：320 MB 详情
Adobe Dreamweaver CS6

AdobeDreamweaverCS6简体中文优化版由官方简
软件大小：278 MB 详情
Adobe Dreamweaver CS5

AdobeDreamweaverCS5软件使设计人员和开发人
软件大小：406 MB 详情

文字是一个网页的核心部分，CSS可以自定义文字的字体、大小和粗细等许多外观细节。font属性在CSS中的使用频率高到的元素之一。

1.定义字体(font-family)

（1）以下例子分别为三个段落指定了三种不同的字体。注：中文的字体要使用引号，而英文字体则不需要。

<!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文字属性(font属性)</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>

（2）如果网站访客的电脑没有安装你指定的字体，那就会出现显示效果的差异。为了避免这种情况我们可以指定备用字体，示例如下：

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>
           ……

通常中文网站的文字大小一般为12px（像素），使用像素定义字体大小有明显的优点：精确，方便。

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>
      ……