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

[日期:2018-04-23] 来源:  作者: [字体: ]

        文字是一个网页的核心部分,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>      ……

 


阅读:
录入:ciliuman

推荐 】 【 打印
相关新闻      
内容查询