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

HTML/XHTML教程
XHTML中不再使用HTML中的一些废弃元素
语义化的HTML结构怎么理解
Web 标准学习 理解结构和表现相分离
html5 标签
HTML5 新事件 小结
HTML5 b和i标记将被赋予真正的语义
HTML是网页制作者必须要学习掌握的
HTML DOCTYPE的缩写
Readonly和Disabled的区别
16进制颜色代码(完全)
H标记要在网页制作中合理使用
abbr标记和acronym标记
知名浏览器对DOCTYPE模式的选择机制
用标准dl,dt,dd标签抛弃table列表
html 标签ID可以是变量
iframe 自适应大小实现代码
HTML5 解析规则分析
HTML减肥 精简HTML标记制作网页
HTML5 File API改善网页上传功能
HTML 5 Reset Stylesheet

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-11-04   浏览: 75 ::
收藏到网摘: 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

登陆 还没注册?