HTML字体设计
张金贵
2001年 46期
在设计网页时,文字是网页中数量最多、使用最广泛的一种页面元素,我们必须要高度重视网页中字体的设计,灵活设计字体的类型、样式、大小和颜色,才能使整个网页中的字体富于变化,给人们以美的享受。
#1一、字体的大小
在HTLM语言中,用… 标签标注网页中的字体,改变该标签的属性就可以定义字体,其中size属性就是控制字体大小的,它的应用方法是…,其中“*”就是定义字体的大小的数字,它的值是从0~7的数字,可以是正值,也可以是负值。如果是正值的话(必须在数字前带“+”号),那就表示该字体相对于指定的基本字号增加几级,如果是负值的话(必须在数字前带“-”号),就表示比基本字号减少几级。例如,如果基本字号是4,那么…就表示网页中的实际显示字体是6号,同样,…就表示网页中的实际显示字体是2号。
另外,point-size属性可以直接设定用磅值来定义字体的大小,而不是使用HTML通常提供的以字号来显示字体的大小。例如…就表示以14磅来显示字体。
#1二、字体的颜色
定义字体颜色的属性是color,默认的文字的颜色是黑色。color属性值可以用颜色的英文名称来表示,如black(黑色)、red(红色)、blue(蓝色)、green(绿色)等;也可以用颜色的十六进制代码来表示,如OOOOOO(黑色)、FFOOOO(红色)、OOOOFF(蓝色)、OO8OOO(绿色)等。它的使用方法为:或者或者。
#1三、字体的类型
如果你想让用户在浏览中按照你设定的字体进行显示,你可以在font标签中用face属性指定要显示的字体,该属性可以同时设定3种字体,如果用户没有安装你指定的第一种字体,浏览器就会用你指定的第二种字体进行显示,如果第二种字体也没有,则使用第三种字体进行显示,这样就可以控制字体类型,不至于破坏精心设计的网页显示效果。例如我们设定…,则浏览器就会首选“宋体”进行显示,如果用户没有安装“宋体”,则以“楷体”进行显示,依此类推。
font标签可以用来定义网页中任意位置处的字体,使用比较灵活。如果你想给整个网页中的文本定义一个缺省的字体大小和颜色的话,那就要用到basefont标签,basefont标签也具有size和color两个属性,分别用来定义缺省字体的大小和颜色。例如… 则网页中的字体将以4号红色字体显示。一般情况下,浏览器默认的字体大小是3号,颜色为黑色。要注意的是,在同一网页中,如果在font标签之前首先使用了basefont标签,那么font标签则只是改变字体的相对值。
#1四、特殊效果的字体
在网页中除了可以改变字体的类型、大小、颜色外,HTML语言还有一些标签用来定义字体的特殊效果,让字体呈现出粗体、斜体、下划线等更多变化,下面我们就来了解一下这些特殊效果的字体是如何实现的。
#21.特定字体
就是明确指明了字体的类型,无论是何种浏览器,遇到这些表示文字的标签时,都用相同的方式进行显示,这些标签是属于物理意义上的标签,它们主要有:
粗体
斜体
下划线
上标,将文字显示为上标。
下标,将文字显示为下标。
电传打字,该标签可使浏览器用等宽字体来显示文本,从而产生一种电传打字机打印文字的效果。
删除线,该标签在指定的文本上画一条删除线。
#22.逻辑字体
使用了下面的这些标签后,你并不能像物理字体那样明确知道字体的显示方式,这些标签并不指明字体如何显示,而是让Web浏览器自行决定显示方式,不同的浏览器解释的效果可能就不一样,一般情况下浏览器是按下述的方式进行解释显示的,由于没有明确的物理规定,所以这类标签就叫逻辑标签。常见的逻辑标签有:
用于将一小段文本显示为一种紧凑的格式化的地址,就像一个模拟信封上的@信地址,一般用斜体进行显示。
一般强调,通常以斜体显示。
特别强调,通常用粗体显示。
以等宽字体显示命令或计算机程序代码。
用于字母序列,用等宽字体显示。
用粗体等宽字体显示文本。
用较小的固定宽度字体显示字体,也可以表示一个程序变量。
用于名词解释,通常用斜体来显示被解释的术语或名词缩写。
用于标题文字,通常用斜体显示。
删除线,用该标签的文字显示时均带有删除线。
缩小字体,比网页中的缺省字体减少一号。
放大字体,比网页中的缺省字体放大一号。
#23.标题字体
对于HTML文档中的标题文字,HTML语言中专门提供了一个Hn标签(n=1~6), 用来定义标题文字,标题文字以粗体显示,h1字体最大,依次递减,h6字体最小。
#24.字符实体
对HTML语言中,对每一个ASCII字符均制定了一个HTML代码,这些代表字符的HTML代码就称作字符实体,因此,在HTML源代码中,我们可以直接输入字符实体来表示各种文字,但这比较麻烦,而且也不便于记忆,所以我们一般只是在网页中出现一些特殊符号而不便于从键盘上直接输入时才用字符实体,字符实体用“&”+ASCII值来表示。
下面是一些特殊符号和它的HTML代码,显示效果如图所示。
注册商标 ® >大于号 >
版权符号 © <小于号 &it
表示“和” & " 引号 "