整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
SS3 @font-face 规则
以前CSS3的版本，网页设计师不得不使用用户计算机上已经安装的字体。
使用CSS3，网页设计师可以使用他/她喜欢的任何字体。
当你发现您要使用的字体文件时，只需简单的将字体文件包含在网站中，它会自动下载给需要的用户。
您所选择的字体在新的CSS3版本有关于@font-face规则描述。
您"自己的"的字体是在 CSS3 @font-face 规则中定义的。
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
| 属性 | |||||
|---|---|---|---|---|---|
| @font-face | 4.0 | 9.0 | 3.5 | 3.2 | 10.0 |
Internet Explorer 9+, Firefox, Chrome, Safari, 和 Opera 支持 WOFF (Web Open Font Format) 字体.
Firefox, Chrome, Safari, 和 Opera 支持 .ttf(True Type字体)和.otf(OpenType)字体字体类型）。
Chrome, Safari 和 Opera 也支持 SVG 字体/折叠.
Internet Explorer 同样支持 EOT (Embedded OpenType) 字体.
注意： Internet Explorer 8 以及更早的版本不支持新的 @font-face 规则。
使用您需要的字体
在新的 @font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。
如需为 HTML 元素使用字体，请通过 font-family 属性来引用字体的名称 (myFirstFont)：
实例
<style> @font-face{font-family:myFirstFont; src:url(sansation_light.woff);}div{font-family:myFirstFont;}</style>
使用粗体文本
您必须添加另一个包含粗体文字的@font-face规则：
实例
@font-face{font-family:myFirstFont; src:url(sansation_bold.woff); font-weight:bold;}
该文件"Sansation_Bold.ttf"是另一种字体文件，包含Sansation字体的粗体字。
浏览器使用这一文本的字体系列"myFirstFont"时应该呈现为粗体。
这样你就可以有许多相同的字体@font-face的规则。
CSS3 字体描述
下表列出了所有的字体描述和里面的@font-face规则定义：
提示：
URL请使用小写字母的字体，大写字母在IE中会产生意外的结果| 描述符 | 值 | 描述 |
|---|---|---|
| font-family | name | 必需。规定字体的名称。 |
| src | URL | 必需。定义字体文件的 URL。 |
| font-stretch | ||
| font-style | ||
| font-weight | ||
| unicode-range | unicode-range | 可选。定义字体支持的 UNICODE 字符范围。默认是 "U+0-10FFFF"。 |
normal
condensed
ultra-condensed
extra-condensed
semi-condensed
expanded
semi-expanded
extra-expanded
ultra-expanded
normal
italic
oblique
可选。定义字体的样式。默认是 "normal"。
normal
bold
100
200
300
400
500
600
700
800
900
可选。定义字体的粗细。默认是 "normal"。
如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！
这里是云端源想IT，帮你轻松学IT”
嗨~ 今天的你过得还好吗？
天不言而四时行，
地不语而百物生。
- 2024.03.11 -
在数字世界的构建中，字体不仅仅是文字的外衣，更是情感和风格的传递者。作为网页设计师和前端开发者，掌握HTML中的字体标签，能够让我们创造出更加丰富和吸引人的用户体验。
今天，就让我们一起走进HTML字体标签的世界，探索它们如何让网页变得生动有趣。
语法结构：<标签 属性=“值”> 内容 </标签>
1、标题标签< h1> - < h6>
标题标签的默认样式是自动加粗的，字体一级标题最大，六级标题最小，每个标题标签独占一行。
示例：
<h1>一级</h1>
<h2>二级</h2>
<h3>三级</h3>
<h4>四级</h4>
<h5>五级</h5>
<h6>六级</h6>2、字体标签<font>
在HTML中，最常用的字体标签非<font>莫属，虽然现代开发中更推荐使用CSS来控制字体样式，但了解它的历史仍然有其必要性。<font>标签允许我们通过color、size和face属性来改变字体的颜色、大小和类型。
例如，如果我们想要显示红色Arial字体的文字，我们可以这样写：
<font color="red" size="5" face="Arial">这是红色Arial字体的文字</font>这行代码的意思是：
注意：虽然标签在HTML4.01中是有效的，但在HTML5中已经被废弃，建议使用CSS来进行样式定义。
3、字号大小：<font size="n">
字号大小在网页设计中同样重要，它直接影响着阅读体验。HTML允许我们通过<font size="n">来调整字体的大小，其中“n”可以是1到7的数字。
例如：
<!DOCTYPE html>
<html>
<head>
<title>Font Size Example</title>
</head>
<body>
<p><font size="5">This is a paragraph with font size 5.</font></p>
<p><font size="10">This is a paragraph with font size 10.</font></p>
<p><font size="15">This is a paragraph with font size 15.</font></p>
</body>
</html>运行结果：
不过，现代网页设计更倾向于使用CSS来控制字号，以便更精细地调整字体大小。
4、粗体标签
<b>：这个标签用于将文本加粗显示，相当于英文中的bold。它不会改变字体，只是使文本看起来更粗体。
<p><b>这是加粗的文本</b></p><strong>：与<b>标签类似，<strong>标签也用于表示加粗的文本。
<p><strong>这是重要的文本</strong></p>但在HTML5中，<strong>标签被赋予了语义，用来表示重要的文本内容。
5、斜体字标签
<i>：这个标签用于将文本设置为斜体，相当于英文中的italic。
<p><i>这是斜体的文本</i></p><em>：与<i>标签类似，<em>标签也用于表示斜体文本。
<p><em>这是强调的文本</em></p>但在HTML5中，<em>标签被赋予了语义，用来表示强调的文本内容。
6、删除字标签
<del>：这个标签用于表示删除的文本，常用于表示不再准确或已过时的内容。比如原价与现价。
<p>原价：<del>100元</del></p>
<p>现价：80元</p>运行之后是这样子的：
在上述示例中，原价为100元，但已被删除，因此使用标签将其包围起来。这样，浏览器会显示删除线来表示该文本已被删除。
7、文本格式化标签 < div> < span>
< div> 标签用来布局，但是一行只能放一个< div> //大盒子，块元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>这是一个div</div>
<div>这是一个div</div>
<div>
<p>这是一个div</p>
</div>
<p>
<div>云端源想</div>
</p>
</body>
</html>如上图控制台所示（打开控制台的方式：F12）：<div>标签里面可以包含<p>标签，<p>标签，里面不可以放<div>标签。
< span> 标签用来布局，一行上可以多个 < span>//小盒子，行元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<span>1234</span>
<span>5678</span>
</body>
</html>8、其它字体标签
<mark>：这个标签用于突出显示文本，通常用于表示高亮的部分。
<small>：这个标签用于表示小号文本，通常用于表示版权声明或法律条款等次要信息。
<ins>：这个标签用于表示插入的文本，常用于表示新增的内容。
<sub> 和 <sup>：这两个标签分别用于表示下标和上标文本，常用于数学公式或化学方程式中。
尽管上述标签可以直接在HTML中使用，但现代网页设计越来越倾向于使用CSS来控制文本的样式，因为CSS提供了更多灵活性和控制能力。
使用CSS类和样式规则可以更有效地管理网站的整体样式，并且可以更容易地适应不同设备和屏幕尺寸。
因此，如果您正在学习或更新您的网页设计知识，建议学习和使用CSS来控制字体和其他文本样式，关于HTML的这些标签了解一下就可以了。
总之，字体是网页设计中不可或缺的元素，它们就像是网页的语言，传递着信息和情感。通过HTML字体标签的学习和应用，我们可以让我们的网页“字”得其乐，让每一位访问者都能享受到更加美妙的网络体验。不断探索和实践，让我们的网页在字体的世界里绽放光彩吧！
今天就先讲到这里了，
更多前端开发基础知识点击文末阅读原文查看哦！
记得关注【云端源想IT】一起学编程！
我们下期再见！
END
文案编辑|云端学长
文案配图|云端学长
内容由：云端源想分享
HTML 中，正确的字符编码是什么？
HTML5 中默认的字符编码是 UTF-8。
这并非总是如此。早期网络的字符编码是 ASCII 码。
后来，从 HTML 2.0 到 HTML 4.01，ISO-8859-1 被认定为标准。
随着 XML 和 HTML5 的出现，UTF-8 也终于到来了，解决了大量的字符编码问题。
下面是关于字符编码标准的简短概述。
在开始的时候：ASCII
计算机信息（数字、文字、图片）在电子中是以二进制 1 和 0（01000101）进行存储的。
为了规范字母数字字符的存储，创建了 ASCII（全称 American Standard Code for Information Interchange）。它为每个存储字符定义了一个独特的二元 7 位数字，支持 0-9 数字，大/小写英文字母（a-z、A-Z）和一些特殊的字符，比如 ! $ + - ( ) @ < > 。
由于 ASCII 使用一个字节（7 位表示字符，1 位表示传输奇偶控制），所以它只能表示 128 个不同的字符。这些字符中有 32 个被保留作为其他控制目的使用。
ASCII 的最大的缺点是，它排除了非英文字母。
ASCII 今天仍然在广泛使用，尤其是在大型计算机系统中。
如需深入了解 ASCII，请查看完整的 ASCII 参考手册。
在 Windows 中：ANSI
ANSI（也称为 Windows-1252），是 Windows 95 及其之前的 Windows 系统中默认的字符集。
ANSI 是 ASCII 的扩展，它加入了国际字符。它使用一个完整的字节（8 位）来表示 256 个不同字符。
自从 ANSI 成为 Windows 中默认的字符集，所有的浏览器都支持 ANSI。
如需深入了解 ANSI，请查看完整的 ANSI 参考手册。
在 HTML 4 中：ISO-8859-1
由于大多数国家使用 ASCII 以外的字符，在 HTML 2.0 标准中，默认的字符编码更改为 ISO-8859-1。
ISO-8859-1 是 ASCII 的扩展，它加入了国际字符。与 ANSI 一样，它使用一个完整的字节（8 位）来表示 256 个不同字符。
如果 HTML 4 网页使用了不同于 ISO-8859-1 的字符集，则需要在 <meta> 标签中指定，如下所示：
实例
<metahttp-equiv="Content-Type"content="text/html;charset=ISO-8859-8">
如需深入了解 ISO-8859-1，请查看完整的 ISO-8859-1 参考手册。
在 HTML5 中：Unicode（UTF-8）
由于以上所列的字符集是有限的，在多语言环境中是不兼容的，所以 Unicode 联盟（Unicode Consortium）开发了 Unicode 标准（Unicode Standard）。
Unicode 标准覆盖了（几乎）所有的字符、标点符号和符号。
Unicode 使文本的处理、存储和运输，独立于平台和语言。
HTML5 中默认的字符编码是 UTF-8。
如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！
当浏览器在网页中检测到 ISO-8859-1 时，通常默认为 ANSI，因为除了 ANSI 有 32 个额外的字符这一点，其他方面 ANSI 基本等同于 ISO-8859-1。
HTML5 中默认的字符集是 UTF-8。
所有的 HTML 4 处理器都支持 UTF-8，所有的 HTML5 和 XML 处理器都支持 UTF-8 和 UTF-16。
*请认真填写需求信息，我们会在24小时内与您取得联系。
