分享
 
 
 

HTML字体设计

王朝html/css/js·作者佚名  2008-05-18
窄屏简体版  字體: |||超大  

一、字体的大小

在HTML语言中,用<font>……</font>标签标注网页中的字体,改变该标签的属性就可以定义字体,其中size属性就是控制字体大小的,它的应用方法是<font size=*>……</font>,其中“*”就是定义字体的大小的数字,它的值是从0~7的数字,可以是正值,也可以是负值。如果是正值的话{必须在数字前带“+”},,那就表示该字体相对于指定的基本字号增加几级,如果是负值的话{必须在数字前“-”},就表示比基本字号减少几级。例如,如果基本字号是4,那么<font size=+2>……</font>就表示网页中的实际显示字体是6号,同样,<font size=-2>……</font>就表示网页中的实际显示字体是2号。

另外,point-size属性可以直接设定用磅值来定义字体的大小,而不是使用HTML通常提供的以字号来显示字体的大小。例如<font point-size="14">……</font>就表示以14磅来显示字体。

二、字体的颜色

定义字体颜色的属性是color,默认的文字的颜色是黑色。color属性值可以用颜色的英文名称来表示,如black{黑色}、red{红色}、 blue{蓝色}、green{绿色}等;也可以用颜色的十六进制代码来表示,如OOOOOO{黑色}、FFOOOO{红色}、OOOOFF{蓝色}、 OO8OOO{绿色}等。它的使用方法为:<font color=red>或者<fontcolor=FFOOOO>或者<font

color=#FFOOOO>。

三、字体的类型

如果你想让用户在浏览中按照你设定的字体进行显示,你可以在font标签中用face属性指定要显示的字体,该属性可以同时设定3种字体,如果用户没有安装你指定的第一种字体,浏览器就会用你指定的第二种字体进行显示,如果第二种也没有,则使用第三种字体进行显示,这样就可以控制字体类型,不至于破坏精心设计的网页显示效果。例如我们设定<font face="宋体、楷体、黑体“〉……〈font〉,则浏览器就会首选“宋体”进行显示,如果用户没有安装“宋体”,则以“楷体”进行显示,依次类推。

font 标签可以用来定义网页中任意位置处的字体,使用比较灵活。如果你想给整个网页中的文本定义一个缺省的字体大小和颜色的话,那就要用到basefont标签,basefont标签也具有size和color两个属性,分别用来定义缺省字体的大小和颜色。例如<basefont size=4 color=red>……</basefont>则网页中的字体将以4号红色字体显示。一般情况下,浏览器默认的字体大小是3号,颜色为黑色。要注意的是,在同一网页中,如果在font标签之前首先使用了basefont标签,那么font标签则只是改变字体的相对值。

四、特殊效果的字体

在网页中除了可以改变字体的类型、大小、颜色外,HTML语言还有一些标签用来定义字体的特殊效果,让字体呈现出粗体、斜体、下划线等更多变化,下面我们就来了解一下这些特殊效果的字体是如何实现的。

1、特定字体

就是明确指明了字体的类型,无论是何种浏览器,遇到这些表示文字的标签时,都用相同的方式进行显示,这些标签是属于物理意义上的标签,它们主要有:

〈b〉〈/b〉粗体

〈i〉〈/i〉斜体

〈u〉〈/u〉下划线

〈sup〉〈/sup〉上标,将文字显示为上标。

〈sub〉〈/sub〉下标,将文字显示为下标。

〈tt〉〈/tt〉电传打字,该标签可使浏览器用等宽字体来显示文本,从而产生一种电传打字机打印文字的效果。

〈s〉〈/s〉删除线,该标签在指定的文本上画一条删除线。

2、逻辑字体

使用了下面的这些标签后,你并不能像物理字体那样明确知道字体的显示方式,这些标签并不指明字体如何显示,而是让Web浏览器自行决定显示方式,不同的浏览器解释的效果可能就不一样,一般情况下浏览器是按下述的方式进行解释显示的,由于没有明确的物理规定,所以这类标签就叫逻辑标签。常见的逻辑标签有:

〈address〉〈/address〉用于将一小段文本显示为一种紧凑的格式化的地址,就像一个模拟信封上的@信地址,一般用斜体进行显示。

<em></em>一般强调,通常以斜体显示。

<strong></strong>特别强调,通常用粗体显示。

<code></code>以等宽字体显示命令或计算机程序代码。

<samp></samp>用于字母序列,用等宽字体显示。

<kbd></kbd>用粗体等宽字体显示文字。

<var></var>用较小的固定宽度字体显示字体,也可以表示一个程序变量。

<dfn></dfn>用于名词解释,通常用斜体来显示被解释的术语或名词缩写。

<cite></cite>用于标题文字,通常用斜体显示。

<strike></strike>删除线,用该标签的文字显示时均带有删除线。

<small></small>缩小字体,比网页中的字体减少一号。

<big></big>放大字体,比网页中的缺省字体放大一号。

3、标题字体

对于HTML文档中的标题文字,HTML语言中专门提供了一个Hn标签{n=1~6},用来定义标题文字,标题文字以粗体显示,h1字体最大,依次递减,h6字体最小。

4、字符实体

对HTML语言中,对每一个ASCII字符均制定了一个HTML代码,这些代表字符的HTML代码就称作字符实体,因此,在HTML源代码中,我们可以直接输入字符实体来表示各种文字,但这比较麻烦,而且也不便于记忆,所以我们一般只是在网页中出现一些特殊符号而不便于从键盘上直接输入时才用字符实体,字符实体用“&”+ASCII值来表示。

下面是一些特殊符号和它的HTML代码,显示效果如图所示。

注册商标 ® >大于号 >

板权符号 © <小于号 &it

表示“和” & "引号 "

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有