当前位置: 首页 > 图文教程 > 网页制作 > HTML/XHTML教程 > 让字体美起来

HTML/XHTML教程
CSS 循序渐进(四)表里春秋
精通 CSS 滤镜(五)
让css使网页图片半透明
实现页面图片阴影特效
发现CSS控件的好处
用CSS缩写给你的网站加速
CSS在IE和Nascape的显示差别
利用CSS,不通过replace替换标引HTML标记
拒绝单调 让网页超链接拥有多姿多彩的下划线
对CSS类及id的规范化命名
利用css里expression来实现界面对象的批量控制
利用CSS控制打印
第一章 CSS的基本认识
第二章 CSS的应用方式
第三章 CSS的应用补充
第四章 颜色背景的CSS
第五章 文字性质的CSS
第六章 区块性质的CSS
HTML之其他标记
HTML之链接标记

HTML/XHTML教程 中的 让字体美起来


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-11-04   浏览: 46 ::
收藏到网摘: n/a

    你可能正建立自己在网上的家-WEB页,又或者它已经被你安置在网络某一角里。无论出于什么目的,你都希望有更多的指导,告诉你该如何更好的布置家。

  在目前许多的指导中,他们都在诉说,应该加一点声音或者一个说话的场地。的确我们都需要它,但我希望关心更多WEB家里底层的东西,比如如何把字体弄的漂亮些,或者让页面颜色变的活泼些,让访问者增加“看欲”,还有更多你曾经都没有关注的细微之处。今天,我们首先来探讨页面的字体。

  一、html中定义字体

  字体的确是很好打交道的,一开始制作页面,它就以默认的样式显示。随着逐步的深入,你会改变一下默认的设置,增大或者减小字体。

  一般字体默认的标签格式:<p>田涛</p>

  接下来,我们把字体设置为黑体或者宋体字样式,它的标签如下:
  <p><font face="黑体">田涛</font></p>

  在以上格式里,我们引出了字体的标签元素<font></font>.该标签具有下面三个属性值

  size="..." 设置字体的大小,一般从1到7,它的默认值是+3,每次改变字体都是+3或者-3。

  color="..." 字体颜色的设置。定义颜色可以利用RGB的16进制值,比如: color=“#ffffff” 。也可以直接利用颜色英文来定义,比如: color=“white”

  face="..." 字体样式的设置,比如:face=“黑体”。或者 face=“黑体,宋体”。后者的格式,每当浏览器访问第一种字体失败后,浏览器就会访问第二种字体,依此类推。

  下面是一个完整的字体格式:

  <font face="黑体" size="2" color="#FFFFFF">田涛</font>

  HTML还提供了以下字体样式标签

  1.六个标题样式

  从h1到h6,如:<h1><font face="黑体" size="2">田涛</font></h1>

  2.字体风格

  斜体字:<em>田涛</em>

  粗体字:<strong>田涛</strong>

  斜体+粗体字:<strong><em>田涛</em></strong>

  3.定义文本

  定义大字体
  <big>田涛</big>
  定义小字体
  <small>田涛</small>或者<small><small><small>田涛</small></small></small>

  如果你在字体标签中设置了size="...",那么<big>标签将不起作用。

  除了以上常用字体标签元素外,HTML还包含很多其它标签,但不我们不多用。

    二.CSS(层叠样式表)改变字体

  在过去页面上的字体是一成不变的,静静的呆在那。当DHTML(动态网页)出现后,我们能有更多方式控制字体了。一般来说,动态字体的实现核心是CSS(层叠样式表)加JavaScript。使用了以上两项技术后,字体就能产生许多变化。

  1.CSS定义字体的标签元素

  font-family: 设置字体字族。

  <span style="font-family: 黑体, 宋体(GB)">田涛</span>

  font-sytle:设置字体类型。

  <span style="font-style: normal">田涛</span>

  font-weight:设置字体的字重。

  <span style="font-weight: bold">田涛</span>

  font-size:设置字体大小。

  <span style="font-size: 14pt">田涛</span>

  font-decoration:修饰文本字体,比如带下划线“underline”。

  <span style="text-decoration: underline">田涛</span>


  对于以上的字体设置,我们可以采用一个方便的方法:

  <span style="font:normal bold 14pt 黑体">田涛</span>

  在style定义的次序是:font-style,font-weight,font-size,font-family.


  2.CSS定义字体和<font>定义字体的冲突

  对于CSS定义字体和<font>定义字体,我们都要注意以下问题,比如有以下字体设置:

  <span style="font-family: 宋体(KSC); font-size: 200pt"><font>田涛</font></span>
  这时侯字体大小将以font-size: 200pt的定义来设置。但如果你在<font>中加入size属性,比如:

  <span style="font-family: 宋体(KSC); font-size: 200pt"><font size="5">田涛</font></span>  
  这时侯,字体的大小以size的设置为准,font-size: 200pt将不起作用。其它的属性也是一样。如果你无需动态字体,就利用HTML4.0的<font>来定义字体,需要动态字体时,就需要使用CSS和JavaScritp来定义字体及引发事件。

  

评论 (0) All

登陆 还没注册?