详细讲解HTML网页设计中关于字体的设计
- 格式:doc
- 大小:27.00 KB
- 文档页数:4
html5 font-size原理HTML5中的`font-size`属性用于控制文本的大小,其原理基于CSS的样式规则。
`font-size`属性可以接受多种单位的值,如像素(px)、em、rem 等,这些单位决定了文本的显示大小。
以下是`font-size`的一些关键原理:1. 数值和单位:`font-size`通常设置为一个数值,这个数值可以乘以元素继承的`font-size`来确定最终的字体大小。
例如,如果父元素的`font-size`是16px,子元素的`font-size`设置为2em,则子元素的字体大小将是32px(16px * 2)。
2. 相对单位:使用相对单位(如em或rem)设置`font-size`时,字体大小会根据元素的上下文而变化。
em单位相对于当前元素的字体大小,而rem单位相对于根元素(通常是html元素)的字体大小。
3. 绝对单位:像素(px)是一个绝对单位,它不会随着其他元素的字体大小变化而变化。
这意味着如果你将`font-size`设置为48px,那么无论在什么设备或屏幕分辨率上,这个字体大小都是固定的。
4. 继承和级联:`font-size`属性可以被继承,这意味着如果没有为某个元素显式设置`font-size`,它将继承其父元素的`font-size`值。
此外,CSS的级联机制确保了不同规则之间的优先级,以及如何应用这些规则到具体的元素上。
5. 浏览器默认值:浏览器通常会为不同的HTML元素提供默认的`font-size`值,除非被显式地覆盖。
理解`font-size`的原理对于控制网页的布局和可读性至关重要。
通过合理地设置`font-size`,可以确保网页在不同设备和视口大小下保持良好的用户体验。
html5——web字体基本介绍1、⾃定义⽹页特殊字体,⽆需考虑⽤户电脑上是否安装了此特殊字体,从此把特殊字体处理成图⽚的时代便成为了过去。
2、⽀持程度⽐较好,甚⾄IE低版本浏览器也能⽀持。
3、web字体的⼤⼩鉴定是字体的⾼度字体格式1、.eot格式:IE专⽤字体,⽀持浏览器IE4+2、.ttf格式:Windows和Mac的最常见的字体,是⼀种RAW格式,⽀持浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+3、.otf格式:被认为是⼀种原始的字体格式,其内置在.ttf的基础上,⽀持这种字体的浏览器有Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile、Safari4.2+4、woff格式:Web字体中最佳格式,他是⼀个开放的TrueType/OpenType的压缩版本,同时也⽀持元数据包的分离,⽀持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+5、.svg格式:基于SVG字体渲染的⼀种格式,⽀持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+;字体图标1、阿⾥巴巴⽮量图库:/2、Font Awesome :/p/font-awesome/3、以上⽹站拥有丰富的字体图库,阿⾥巴巴可能有版权问题,建议第⼆个阿⾥字体1、拷贝项⽬下⾯⽣成的font-face2、定义使⽤iconfont的样式3、在标签添加样式,并写⼊字体编码4、也可以使⽤伪元素进⾏在样式类中就插⼊字体编码注意事项1、'\e605'是Unicode编码’؅‘转化来的,这是固定格式2、@font-face是⽤来声明⾃⼰的⾃定义字体,这也是固定格式<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>@font-face {font-family: 'iconfont';src: url('font/iconfont.eot');src: url('font/iconfont.eot?#iefix') format('embedded-opentype'),url('font/iconfont.woff') format('woff'),url('font/iconfont.ttf') format('truetype'),url('font/iconfont.svg#iconfont') format('svg');}.self-font::before {content: '\e605';font-size: 30px;font-family: "iconfont" !important;}</style></head><body><span class="self-font"></span></body></html>Font Awesome1、直接引⽤CSS2、直接在标签中添加类名(原来也是伪元素)<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="css/font-awesome.css"> </head><body><span class="icon-play">播放图标</span><span class="icon-beer">啤酒图标</span><span class="icon-book">图书图标</span><span class="icon-money">⾦钱图标</span></body></html>。
如何设置HTML 页⾯中⽂本的字体字体属性介绍CSS 中的字体属性是⼲什么的呢?字体字体肯定和字体有关咯,就是设置HTML 页⾯中⽂本的字体,CSS 中常⽤的字体属性有⼏种呢,笔者给⼤家梳理了下,⽐较常⽤的⼀共有5种,今天我们就看看这5种能给⽂本的字体带来什么效果呢。
CSS 字体属性定义⽂本的字体系列、⼤⼩、加粗、风格(如斜体)。
在CSS 中常⽤的字体属性有5种,如:font-style 、font-weight 、font-size 、font-family 、font 。
font-style 设置斜体font-style 属性主要是给⽂本设置斜体⽤的。
font-style 属性使⽤表值描述normal 将斜体字体恢复正常。
italic 设置字体为斜体。
让我们进⼊font-style 属性的实践,实践内容如:将HTML 页⾯中的p 标签的⽂本字体设置为斜体。
假如我们不使⽤font-style 属性,可不可将p 标签中的⽂本字体设置为斜体呢?,如果⼤家学习HTML 还可以,应该知道在HTML 当中有⼀个i 标签,i 标签的作⽤就是将⽂本的字体设置为斜体,⾃带的功能。
有点啰嗦了哈,给初学者普及下细节哦。
代码块结果图注意:使⽤font-style 属性可以将i 标签⾃带的斜体功能给去除掉,如:下⾯关键代码哦。
使⽤font-style 属性设置⽂本的字体为斜体。
代码块<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>设置字体为斜体</title></head><body><p>成功不是打败别⼈,⽽是改变⾃⼰。
font在html中的用法在HTML中,可以通过使用<font>标签来改变文本的字体样式。
<font>标签可以包裹在文本内容的开始和结束标签之间,并使用一些属性来定义字体的样式。
下面是<font>标签的用法:<font color="颜色值">文本内容</font>:将文本内容的颜色改为指定的颜色。
颜色值可以是预定义的名称(如"red"表示红色)或者是十六进制颜色代码(如"#FF0000"表示红色)。
<font size="数字">文本内容</font>:将文本内容的字体大小改为指定的数字。
数字的单位为像素。
<font face="字体名称">文本内容</font>:将文本内容的字体样式改为指定的字体。
字体名称可以是预定义的名称(如"Arial"表示Arial字体)或者是特定的字体系列(如"sans-serif"表示使用系统默认的无装饰字体)。
注意:虽然<font>标签在过去是用来改变文字风格的常用标签,但是根据HTML5的最新规范,<font>标签已经被废弃。
现在更推荐使用CSS样式来改变文本的字体样式。
例如,可以通过设置文本的颜色、字号和字体族来定义字体样式,而不是依赖于<font>标签。
拓展内容:除了<font>标签,CSS样式也可以用于改变文本的字体样式。
可以在HTML文件的<head>标签中使用<style>标签或者外部CSS 文件来定义文本的字体样式。
通过使用CSS样式可以实现更强大的字体样式控制,例如:<style>p {font-family: Arial, sans-serif;font-size: 16px;color: #000000;font-weight: bold;text-decoration: underline;}</style>上述代码中,定义了一个针对<p>标签的样式规则,将文本的字体样式改为Arial字体,字号为16像素,颜色为黑色,加粗加粗,底部加下划线。
网页设计字体大小规范网页设计中,字体大小的规范是非常重要的,它可以影响用户对网页内容的阅读体验,也会直接影响网页的可读性和可访问性。
在进行网页设计时,我们需要遵守一些字体大小的规范,以确保网页内容的清晰度和可读性。
下面是一些常见的网页设计字体大小规范。
1. 主标题(Heading)字体大小应该大于正文内容。
一般来说,主标题的字体大小可以设置为28px到36px之间,根据网页的风格和内容来定。
2. 子标题(Subheading)字体大小应该相对较小,一般可以设置为18px到24px之间。
子标题是对主标题的进一步解释和补充,字体大小要比主标题小一些,以区分层次。
3. 正文(Body)字体大小应该设置为16px到18px之间,这是最常用的正文字体大小。
这个字体大小足够清晰,同时也适合大多数用户阅读。
4. 标注和辅助文本(Caption and Auxiliary Text)字体大小应该相对较小,一般可以设置为14px到16px之间。
这些文本通常是对图片、表格或其他内容的解释或补充,字体大小要比正文小一些。
5. 链接(Link)字体大小应该和正文保持一致,一般可以设置为16px到18px之间。
链接可能是网页中最重要的交互元素之一,字体大小要保持与正文一致,以确保用户能够快速识别并点击链接。
6. 导航菜单(Navigation Menu)字体大小应该设置为18px到20px之间。
导航菜单是用户在网页中进行导航的重要工具,字体大小要稍大一些,以方便用户快速定位和点击。
7. 按钮(Button)字体大小应该设置为16px到18px之间。
按钮是网页中最常见的交互元素之一,字体大小要适中,以便用户能够清晰地看到按钮上的文本内容并点击。
除了以上的字体大小规范,还需要注意以下几点:1. 网页设计中,字体大小的一致性非常重要。
相同类型的文本应该使用相同的字体大小,以保持整体的统一感。
2. 不同层级的标题和文本应该使用不同的字体大小,以区分层次和重要性。
font在HTML中的用法HTML(超文本标记语言)是一种用于创建网页的标记语言。
在HTML中,可以通过使用font标签来控制文本的字体、大小、颜色和样式等属性。
本文将详细介绍font标签在HTML中的用法,包括其属性和示例。
1. font标签基本语法font标签是一个行内元素,用于改变文本的显示效果。
其基本语法如下:<font[属性名="属性值"]>文本内容</font>其中,方括号内的部分表示可选项,你可以根据需要选择性地添加不同的属性来改变文本的样式。
2. font标签常用属性2.1 color属性color属性用于设置文本的颜色。
可以使用颜色名称、十六进制值或RGB值来指定颜色。
示例:<font color="red">红色文本</font><font color="#00ff00">绿色文本</font><font color="rgb(0,0,255)">蓝色文本</font>2.2 size属性size属性用于设置文本的大小。
可以使用相对大小(1-7)或绝对大小(像素值)来指定大小。
示例:<font size="4">较大字体</font><font size="6">很大字体</font><font size="18" face="Arial">特大字体</font>2.3 face属性face属性用于设置文本的字体。
可以使用系统默认字体或指定的字体名称。
示例:<font face="Arial">Arial字体</font><font face="宋体">宋体字体</font>2.4 bgcolor属性bgcolor属性用于设置文本的背景颜色。
html中的font设置字体html中font标签本身就是一个设置字体属性的标签,那么它的具体属性有哪些呢?下面由店铺为大家整理了html中的font设置字体的相关知识,希望对大家有帮助!html中font设置字体总结一、font标签语法与结构<font color="#FF0000"> 颜色</font>Font color设置文本颜色为红色“#FF0000” ,你可能想了解css 字体颜色:css color<font size="6"> 文字大小</font>Font size设置文本文字大小尺寸为6 ,你可能想了解css字体大小:css font-size<font face="微软雅黑">微软雅黑字体</font>Font face设置文本字体为“微软雅黑” ,你可能想了解css字体设置: css font-family二、Font标签说明常常我们在一个网页中直接使用font标签进行对文本设置文本字体、文本文字大小、文本颜色等样式。
三、Font应用案例html代码<font color="#FF0000"> 设置文本颜色</font><br /><font size="6"> 设置文本字体大小</font><br /><font face="微软雅黑">微软雅黑字体设置了文本字体</font> 补充:css5对于font直接设置网页文本样式标签总结1)、使用font size设置文字大小2)、使用html font标签face属性设置文字字体3)、使用html font color 设置文字颜色。
在HTML中,font-family标签是用来指定文本的字体族。
字体族是一组拥有相似外观特点的字体,包括字体的风格、粗细、间距等。
在网页设计中,正确使用font-family标签可以帮助我们实现更具吸引力和易读性的页面布局。
1. 字体族的选择在使用font-family标签时,我们应该首先考虑到用户的阅读习惯和习惯字体。
一般来说,中文网页中常用的字体族包括宋体、黑体、楷体等,而英文网页中常用的字体族包括Arial、Times New Roman、Verdana等。
2. 多字体族的设置为了确保网页在不同的操作系统和浏览器上显示效果一致,我们可以设置多个字体族作为备选,这样可以在第一选择的字体不存在时,自动切换至备选字体。
font-family: "微软雅黑", "Microsoft YaHei", simhei, "宋体";3. 字体族的通用设置除了指定具体的字体族外,我们还可以选择通用字体族作为备选。
通用字体族是可以在大多数设备上显示的字体,font-family: Arial, sans-serif; 表示如果用户设备上没有Arial字体,则显示默认的无衬线字体。
4. 字体族的优先级在设置多个备选字体族时,我们应该注意字体族的优先级,并结合用户的阅读习惯做出选择。
一般来说,中文字体族的优先级应高于英文字体族,同时应考虑字体的兼容性和版权情况。
总结来说,正确使用font-family标签可以帮助我们实现更美观、易读和兼容性良好的网页设计。
在选择字体族时,我们应该考虑用户的阅读习惯、多字体族的设置、通用字体族的选择和字体族的优先级,以此来确保网页的显示效果和用户体验。
个人观点:在进行网页设计时,正确使用font-family标签是非常重要的。
通过合理选择和设置字体族,可以使网页文本更美观、易读,并且提升用户体验。
也可以有效解决不同操作系统和浏览器带来的字体兼容性问题。
网页设计怎么设计字体颜色1、html页面中设置color 字色这是我的段落2、style应用3、CSS中定义html样式在这里定义:p{color:blue}给所有段落中的字体颜色定义为蓝色。
2网页制定如何玩转字体1.将文字放在图象上将字体直接与海报上的元素相结合, 也是一个不错的小技巧。
下面这个海报就是个有趣的例子, 制定师直接讲文字放在龙虾身上, 效果就像印上去的一样。
2.使用文字作为制定元素如果你想使用文字作为一个制定元素, 但不想将它只是把它作为一个尺寸较大的点, 如前所示, 创造性地在你的海报上, 排列对齐, 调整大小、颜色和位置, 以制定一个难忘的海报像这张Studio Vie制定的海报一样。
3.让文字融入图像元素文字其实也不用仅仅是放在图像元素的上一层它可以直接成为图像元素的一部分。
4.添加动态效果5.创意字体摄影风摄影中往往会有许多非常规的、古怪的拍摄办法。
其实制定中也可以, 就像下面这张Typomania的海报, 我们可以利用后期的处理使得T字与摄影相结合, 非常有震撼性地表现了主题。
6.创建布局类型虽然有很多人都喜爱使用网格来设置和控制制定内容。
但是把你的制定的字体围绕在你的图片元素形状四周也是个不错的方式。
在下面的示例中, 如何将网格与双手的图像巧妙组合在一起, 并且让这两者的信息都展示出来而不会互相打搅。
这幅海报既富有创意, 又细腻生动。
7.个性的泼墨字体风我们都认为如果把黑墨水泼在了画面上, 那这张图算是废了。
但如果你想寻找一种快捷的方式来创建一个具有叛逆态度的海报, 无妨尝试一下黑色泼墨风格。
8.可爱的叙事风格9.古怪的插图风格不要害怕使用一个古怪的插图, 这能使你的海报变得特立独行, 一眼就能被人记住。
当然, 除了字体风格古怪, 还要结合各种元素、颜色并进行精心的排版, 从而得到一个醒目的视觉解决方案, 就像下列图La Guarimba制定的这张一样。
3网页制定注意事项对比的问题你合计过阅读黑底白字和白底黑字的不同吗?你有没有试过阅读一下白底灰字?有些方式之所以比其他的更好, 其原因就是这是一种眼睛感知到对比的方式。
1.2 文字的多样化修饰本文从文字的细节修饰入手,使读者能把握HTML的各种字体格式的变化,制作出更为专业的网页。
1.2.1 文字样式设置的基本标签—<font>设置字体样式的基本标签是<font></font>,被其包含的文本为样式作用区。
在初学者的HTML代码编写中,<font></font>容易被多重嵌套,如<font 属性1=值1><font 属性2=值2>文本</font></font>。
还有一种情况是标签嵌套错位,如<font><p>文本</font></p>。
为了规范代码的编写,避免不必要的错误,读者在初学时一定要谨慎。
1.2.2 设置文字的颜色color是<font></font>标签的属性之一,用于设置文字颜色。
在D:\web\目录下创建网页文件,命名为font_color.htm,编写代码如代码1.7所示。
代码1.7 字体颜色的设置:font_color.htm<html><head><title>字体颜色的设置</title></head><body>浅红色文字:<font color="#dd0000">HTML学习的本质就是该是什么就用什么</font><br />深红色文字:<font color="#660000">HTML学习的本质就是该是什么就用什么</font><br />浅绿色文字:<font color="#00dd00">HTML学习的本质就是该是什么就用什么</font><br />深绿色文字:<font color="#006600">HTML学习的本质就是该是什么就用什么</font><br />浅蓝色文字:<font color="#0000dd">HTML学习的本质就是该是什么就用什么</font><br />深蓝色文字:<font color="#000066">HTML学习的本质就是该是什么就用什么</font><br />浅黄色文字:<font color="#dddd00">HTML学习的本质就是该是什么就用什么</font><br />深黄色文字:<font color="#666600">HTML学习的本质就是该是什么就用什么</font><br />浅青色文字:<font color="#00dddd">HTML学习的本质就是该是什么就用什么</font><br />深青色文字:<font color="#006666">HTML学习的本质就是该是什么就用什么</font><br />浅紫色文字:<font color="#dd00dd">HTML学习的本质就是该是什么就用什么</font><br />深紫色文字:<font color="#660066">HTML学习的本质就是该是什么就用什么</font><br /></body></html>在浏览器地址栏输入http://localhost/font_color.htm,浏览效果如图1.7所示。
设定字体大小、颜色、字型
有关设定文字的方法共有以下几种:
1.设定HTML文件主体文字颜色。
<BODY>...</BODY>标记。
如: <BODY TEXT=RED>...</BODY> 或
<BODY TEXT=#FF0000>...</BODY>
2.设定基本字体大小、颜色、字型。
<BASEFONT>...</BASEFONT>标记。
3.设定字体大小、颜色、字型。
<FONT>...</FONT>标记。
注意事项
1. 设定字体的大小分: 绝对SIZE 如: <FONT SIZE=4>
和相对SIZE 如: <FONT SIZE=+1> ( 以BASEFONT 设定的字体大小做加减)。
2. 设定字体的颜色可以是颜色名称或#RRGGBB表红绿蓝强度( 00 暗~ FF 亮)。
#RRGGBB 所代表的是红、绿、蓝三原色,每一色由两位十六进制的数值表示( 即十进制0 ~ 255 )。
十六进制: 0、1、2、3、4、5、6、7、8、9、A、B、C、D、E、F。
3. 设定字体的字型会按照顺序找出显示的字型,若找不到则以系统预设字型显示。
html中font标签的用法HTML中font标签的用法HTML的<font>标签用于设置文本的字体、颜色和大小。
虽然<font>标签已被HTML5废弃,但在一些老旧的网页中仍然有使用。
以下是一些<font>标签的用法的详细讲解。
设置字体使用<font>标签可以设置文本的字体。
可以通过face属性指定字体的名称,也可以通过size属性指定字体的大小。
示例代码:<font face="Arial">这是使用Arial字体的文本。
</font> <font size="4">这是使用默认字体大小的文本。
</font>设置字体颜色使用<font>标签可以设置文本的颜色。
可以通过color属性指定颜色的名称或十六进制值。
示例代码:<font color="red">这是红色的文本。
</font><font color="#0000FF">这是蓝色的文本。
</font>设置字体样式使用<font>标签还可以设置文本的样式,例如加粗和斜体。
示例代码:<font size="4" face="Arial" color="green"><b>这是加粗的文本。
</b></font><font size="4" face="Arial" color="green"><i>这是斜体的文本。
</i></font>结合使用<font>标签可以结合使用多个属性来设置文本的字体、颜色和大小。
网页设计之字体设计规范网页设计之字体设计规范网页字体的选择,需要按照一定的规范来进行选择,以下是店铺整理的网页设计之字体设计规范,欢迎参考阅读!网页设计常用字号最好用偶数字号1、Header导航文字12号或14号;2、Menu导航文字14—18号;3、Sidebar文字12号或14号,4、一级菜单使用14号、二级菜单使用12号或一级菜单使用12号加粗、二级菜单使用12号。
5、Footer文字12号或14号6、正文:大标题文字24—32号;标题文字16或18号;正文文字12号或14号。
7、标题文字字号,18px,20px,24px,28px,32px,尽可能使用双数。
8、按钮文字:比如登录、注册页面按钮或其他按钮,文字14—16号,可根据实际情况调整大小或加粗。
9、同一层级的字号搭配应该保持一致。
比如,同一层级的版块中标题文字和内容文字大小的一致性。
在苹果官网中,产品展示文字以64号和32号搭配,文字内容简短有力,可读性强,同时非常具有视觉冲击力,突出显示了品牌特征。
字体排版规范一、最佳易读性规范1.行宽传统图书排版每行最佳字符数是55—75,实际在网页上每行字符75—85更流行。
中文在14号字体时,建议35—45个文字2.行高网页设计中,文字间距一般根据字体大小选1—1.5倍作为行间距,1.5—2倍作为段间距比如12号字体,行间距是12px—18px,段落间距则是18px—24px。
另外,行高/段落之间的空白=0.754。
行间距正好是段落间距的75%是非常常见的。
3.行对齐通常情况下,建议在页面上只使用一种文本对齐,尽量避免两端对齐4.文字留白在排版文字时,在版面需要留出空余空间,留白面积从小到大应该遵循的顺序是:字间距、行间距、段间距。
此外,在排版内容区之前,需要根据页面实际情况给页面四周留出余白。
5、CRAP原则(carp)对比(Contrast)、重复(Repetition)、对齐(Alignment)、亲密性(Proximity)字体选择字体:中文:宋体,微软雅黑,方正系列(无状态)字号:网页中正文/导航字号在12px-18px之间英文可以偏小一些10px-16px,再小识别性就不是特别好了,中规中矩,经典通用。
●字体(Font)的设置是网页制作新手遇到的第一个难点。
如何控制字体大小,如何取消超链接字体的下划线是网友来信问得最多的。
好,我们来彻底研究一下字体的各个方面:
字符集的设定。
在查看html文件原代码时,我们经常可以在文件头<head>和</head>之间看到这么一句代码:
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
这段代码的作用是什么呢?是否可以删除呢?
其实这是meta标签的设定语句,是给浏览器看的。
它的作用就是告诉浏览器:这个HTML 文件是采用gb2312字符集制作的。
当浏览器读到这一代码,便以gb2312字符集来解释和翻译网页原代码,然后我们就可以看到正确的网页。
所以这个meta语句是非常重要的,尽量不要删除。
gb2312就是我们最熟悉的GB简体码,英文是iso-8859-1字符集。
其它还有BIG5,UTF-8,Shift-JIS,EUC,KOI8-2等字符集,分别用于不同的字体显示。
字体的使用。
在网页里,字体的定义语句是:<font face="Arial">显示文字</font>
其中Arial就是一种字体的名称。
默认的浏览器定义的标准字体是中文宋体和英文times new Roma字体。
也就是说,如果你没有设置任何字体,网页将以这两种标准字体显示。
同时,着两种字体也可以在任何操作系统和浏览器里正确显示。
windows另外自带了40多种英文字体和5种中文字体。
这些字体,你也可以在网页里自由使用和设置。
凡是使用windows操作系统的浏览器都可以正确显示这些字体,但在其它操作系统里,如unix 则不能完全正确显示。
如果你需要用一种特殊的字体来体现你的风格,那么如何让大家可以真正看到你的设计页面呢?解决的办法是:用图片。
将需要用这种字体的地方用图片代替,以保证所有人看到的页面是同一效果。
字体的样式(style)。
字体的样式有四种:正常体(regular),斜体(Italic),粗体(Bold),粗斜体(Bold Italic)。
设置方法很简单,阿捷就不多罗嗦了。
字体的效果。
这里指通过html语言设定可以直接显示的效果,在html里的语句设定为:
<span style="text-decoration: overline">显示文字</span>
其中,overline是指上划线效果。
其它常用的效果还有:underline(下划线),uppercase(大写)等等。
字体大小的控制。
字体大小的控制是本节的重点。
一般字体默认的大小是12pt(镑).用<font size="+1">语句可以将文字增大2pt。
这种方法我们都已经掌握了。
而现在网络上最流行的小中文字体大小为9pt,是如何设定的呢?有三种方法:
1.用"<span style="font-size:9pt">显示文字</span>"语句来设定。
显然这种方法非常麻烦,你必须为每段文字都设定大小。
2.用CSS层叠样式表。
CSS是DHTML的一个组成部分,它可以定义整个页面的字体显示风格和大小。
是较为简便的方法。
比如,这里需要设定整个页面文字大小为9pt,只要将下面这段代码加入html代码的<head>和</head>之间:
<style type="text/css">
<--
body {FONT-SIZE: 9pt}
th{FONT-SIZE: 9pt}
td{FONT-SIZE: 9pt}
-->
</style>
其中FONT-SIZE:9pt指字体的大小为9镑
3.第二种方法已经简化了许多步骤,但是仍然不是最理想的方法,因为你必须在每个页面的head区都放置这么一段代码,扩大了文件的字节。
另外这样的做法还有一个重大缺点,就是如果我需要修改整个站点的字体大小,就必须一页一页的改!
所以推荐给你最终也是目前最好的方法---外部摸板文件调用法。
“外部摸板调用”就是说你将css的设定作成一个单独的文件,在每个页面里都调用它。
一旦你需要修改字体大小,只要修改一个.css文件,几百个页面就同时修改了。
(这种方法类似子程序调用编写过程序的网友很容易理解:)
调用的具体方法如下:
(1)将上面的css代码copy成一个mycss.txt文件,然后修改后缀名为mycss.css
(2)在html文件的<head></head>之间插入<LINK href="mycss.css" rel=stylesheet type=text/css>,
语句调用mycss.css(注意有关路径的设置正确)OK!
字体超链接样式的设定。
通常在网页的<body>中设置连接的颜色,如:<body link="#FF00FF" vlink="#FF0000" alink="#008080">
其中:link -- Hyperlink(连接)的颜色
vlink-- visited Hyperlink(已访问过的连接)颜色
alink-- active Hyperlink (当前活动的连接)颜色
颜色用rgb的16进制码表示如红色是#FF0000。
同样用CSS可以更简便的设定网页超连接的样式,看下面这段代码
<style type="text/css">
A:link {TEXT-DECORA TION: none;COLOR: #0000FF}
A:visited {TEXT-DECORA TION: none;COLOR: #000000}
A:active {TEXT-DECORATION: none;COLOR: #FF0000}
A:hover {COLOR: #FF0000}
</style>
将它插入html文件的head区就可以了。
其中link设定的是有超链接的颜色;visited是访问过的超链接颜色;active是鼠标移上去的颜色;hover是鼠标点击时的颜色。
而
"text-decoration:none"是指取消超链接的下划线显示。
关于CSS的设定还有更多的用法和技巧,比如在同一页中设定不同的字体大小和超链接颜色,请学习有关CSS的专门知识在这里我们不在冗述。
●上面已经介绍了字体在技术上的各个方面。
有关字体的设计使用,目前还没有一个成熟的理论,下面是几条网页设计中字体的使用原则,仅供参考:
1.不要使用超过3种以上的字体。
字体太多则显得杂乱,没有主题。
2.不要用太大的字。
因为版面是宝贵,有限的,粗陋的大字体不能带给访问者更多信息。
3.不要使用不停闪烁的文字。
想让浏览者多停留一会儿的话,就不要使用闪烁的文字。
4.原则上标题的字体较正文大,颜色也应有所区别。