软件发布| 专题库| 优优资讯| 苹果专区| 安卓专区| 软件下载| 首页
优优资讯 电脑教程 安卓教程 安卓攻略 苹果教程 苹果攻略 新闻资讯

Dreamweaver教程之文字属性font介绍

时间:2015-03-04 来源:本站整理 我要评论

  网页设计过程中最核心的一个内容是文字的定义,CSS中便提供了有关文字字体、大小、样式的自定义方法,下面小编就为大家做有关文字属性font的详细介绍。

  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>

  ……
 

用户评论

(已有0条评论)
表情
注:您的评论需要经过审核才能显示哦,请文明发言!
还没有评论,快来抢沙发吧!
快速检索
0-9 A B C D E F G H I J K L M N O P Q R S T U V W X Y Z