详细讲解HTML网页设计中关于字体的设计

合集下载

html5 font-size原理

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字体

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编码’&#x605‘转化来的，这是固定格式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></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>播放图标啤酒图标图书图标⾦钱图标</body></html>。

如何设置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>成功不是打败别⼈，⽽是改变⾃⼰。

font在html中的用法

font在html中的用法在HTML中，可以通过使用标签来改变文本的字体样式。

标签可以包裹在文本内容的开始和结束标签之间，并使用一些属性来定义字体的样式。

下面是标签的用法：文本内容：将文本内容的颜色改为指定的颜色。

颜色值可以是预定义的名称（如"red"表示红色）或者是十六进制颜色代码（如"#FF0000"表示红色）。

文本内容：将文本内容的字体大小改为指定的数字。

数字的单位为像素。

文本内容：将文本内容的字体样式改为指定的字体。

字体名称可以是预定义的名称（如"Arial"表示Arial字体）或者是特定的字体系列（如"sans-serif"表示使用系统默认的无装饰字体）。

注意：虽然标签在过去是用来改变文字风格的常用标签，但是根据HTML5的最新规范，标签已经被废弃。

现在更推荐使用CSS样式来改变文本的字体样式。

例如，可以通过设置文本的颜色、字号和字体族来定义字体样式，而不是依赖于标签。

拓展内容：除了标签，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>上述代码中，定义了一个针对标签的样式规则，将文本的字体样式改为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中的用法

font在HTML中的用法HTML（超文本标记语言）是一种用于创建网页的标记语言。

在HTML中，可以通过使用font标签来控制文本的字体、大小、颜色和样式等属性。

本文将详细介绍font标签在HTML中的用法，包括其属性和示例。

1. font标签基本语法font标签是一个行内元素，用于改变文本的显示效果。

其基本语法如下：<font[属性名="属性值"]>文本内容其中，方括号内的部分表示可选项，你可以根据需要选择性地添加不同的属性来改变文本的样式。

2. font标签常用属性2.1 color属性color属性用于设置文本的颜色。

可以使用颜色名称、十六进制值或RGB值来指定颜色。

示例：红色文本绿色文本蓝色文本2.2 size属性size属性用于设置文本的大小。

可以使用相对大小（1-7）或绝对大小（像素值）来指定大小。

示例：较大字体很大字体特大字体2.3 face属性face属性用于设置文本的字体。

可以使用系统默认字体或指定的字体名称。

示例：Arial字体宋体字体2.4 bgcolor属性bgcolor属性用于设置文本的背景颜色。

html中的font设置字体

html中的font设置字体html中font标签本身就是一个设置字体属性的标签，那么它的具体属性有哪些呢?下面由店铺为大家整理了html中的font设置字体的相关知识，希望对大家有帮助!html中font设置字体总结一、font标签语法与结构 颜色Font color设置文本颜色为红色“#FF0000” ，你可能想了解css 字体颜色：css color 文字大小Font size设置文本文字大小尺寸为6 ，你可能想了解css字体大小：css font-size微软雅黑字体Font face设置文本字体为“微软雅黑” ，你可能想了解css字体设置： css font-family二、Font标签说明常常我们在一个网页中直接使用font标签进行对文本设置文本字体、文本文字大小、文本颜色等样式。

三、Font应用案例html代码 设置文本颜色 设置文本字体大小 微软雅黑字体设置了文本字体 补充：css5对于font直接设置网页文本样式标签总结1)、使用font size设置文字大小2)、使用html font标签face属性设置文字字体3)、使用html font color 设置文字颜色。

Html 字体大小

[div style=font-size:9px ]表示9点阵字体式样
[div style=font-size:10px]表示10点阵字体式样
[div style=font-size:12px]表示12点阵字体式样
[div style=font-size:14px]表示14点阵字体式样
[div style=font-size:18px]表示18点阵字体式样
Html字体大小
Html字体大小上标下标设置
2011-07-19 8:41
网页中常用的字体尺寸定义有7个号，1号字最小，7号字最大，定义字号的
指令代码是尖括号内：[font size=X]。
为了便于正常显示，< >暂时用[ ]代替。
各种字号尺寸如下：
[font size=1]一号字尺寸式样[/font]
用的字体。
font face=/@方正隶二简体如果你没有安装隶书字库那么现在看
到的仍然是宋体
在有些标记中可以放很多设置参数，各项之间用空格隔开。这些设置参数放在不同
的标记中，其作用范围是不同的。系统的默认参数是：标准宋体字、字号3号、
背景白(ffffff)、字色黑(000000)、行高度等于字高。如需要改变这些参数，就要重新设置。
[div style=font-size:22px]表示22点阵字体式样
除尺寸大小外，还有一些字体设置代码：
b粗体字
i斜体字
u加底线
del横线(表示删除ub下标——显示结果：字体下标
另外HTML中还有很多逻辑标记字体的代码，因逻辑定义依不同浏览器有
不同的显示结果，你编的网页别人看着和你看着不一定相同，所以一般最好不
这行代码设置了“bgcolor=ddffee”背景为稍偏绿的亮青色；“text=0000ff”正文字符为兰色；

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

●字体(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等字符集，分别用于不同的字体显示。

字体的使用。

在网页里，字体的定义语句是：显示文字
其中Arial就是一种字体的名称。

默认的浏览器定义的标准字体是中文宋体和英文times new Roma字体。

也就是说，如果你没有设置任何字体，网页将以这两种标准字体显示。

同时，着两种字体也可以在任何操作系统和浏览器里正确显示。

windows另外自带了40多种英文字体和5种中文字体。

这些字体，你也可以在网页里自由使用和设置。

凡是使用windows操作系统的浏览器都可以正确显示这些字体，但在其它操作系统里，如unix 则不能完全正确显示。

如果你需要用一种特殊的字体来体现你的风格，那么如何让大家可以真正看到你的设计页面呢？解决的办法是：用图片。

将需要用这种字体的地方用图片代替，以保证所有人看到的页面是同一效果。

字体的样式(style)。

字体的样式有四种：正常体(regular),斜体(Italic),粗体(Bold),粗斜体(Bold Italic)。

设置方法很简单，阿捷就不多罗嗦了。

字体的效果。

这里指通过html语言设定可以直接显示的效果，在html里的语句设定为：
显示文字
其中，overline是指上划线效果。

其它常用的效果还有：underline(下划线)，uppercase(大写)等等。

字体大小的控制。

字体大小的控制是本节的重点。

一般字体默认的大小是12pt(镑).用语句可以将文字增大2pt。

这种方法我们都已经掌握了。

而现在网络上最流行的小中文字体大小为9pt，是如何设定的呢？有三种方法：
1.用"显示文字"语句来设定。

显然这种方法非常麻烦，你必须为每段文字都设定大小。

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.原则上标题的字体较正文大，颜色也应有所区别。