整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
以下HTML标记用于格式化网页上文本的外观。这可以使网页变得更加生动，但是，文本格式的太多变化也会使人不快。
head标记有6个级别可用，从h1用于最大和最重要的标题，到h6是最小的标题。
b标记之间的文本以粗体显示，与周围的文本相对突出。
i标记以一个小角度显示文本。
u标记在文本正文添加一条线，请注意，链接已经有下划线，不需要额外的标记。
strike标记在文本的正中间画一条线，通常用来表示文本是旧的，不再相关，删除。也可以用<s></s>代替。
pre标记之间的任何文本，包括空格、回车符和标点符号，都将像在文本编辑器中一样显示在浏览器中（通常浏览器会忽略多个空格）
code标记之间的文本以固定宽度字体显示，通常在显示源代码时使用。
tt标记之间的文本就像是用打字机打出了一个固定宽度的文字。
blockquote标记定义一个块引用，并且在块的左右添加额外的边距。
small标记让你无需设置字体大小，就可以使文本呈现比周围稍小的外观。
font标记的color属性改变几个字或一段文字的颜色。属性使用十六进制颜色代码。
font标记的size属性改变字体的大小，值范围从1到7，1是最小，7是最大。
font标记的size属性还可以相对于其前面的字体大小的作即时更改，此用法将按你指定的数字增减字体大小。例如：<font size="-1">一些文本</font>
font标记的face属性以指定的字体显示文本，值为字体名称，如“Helvetica”、“Arial”或“Courier”。
center标记之间的所有内容都居中。
em标记用于强调文本，文本通常以斜体显示，可能会根据浏览器的不同而有所不同。
strong标记用于着重强调文本，通常以粗体显示，可能会根据浏览器的不同而有所不同。
下面是以上标记的示例：
浏览器显示内容如下所示：
前，浏览器只能展示本地安装的字体。如果字体未安装，网页显示效果会大打折扣。
为了解决这个问题，CSS 引入 web 字体，允许浏览器从服务器下载字体，下载完成后再重新渲染字体。
使用 web 字体前，需要了解常用的字体文件格式。
TTF 字体文件，即 TrueType 字体，是由苹果和微软在 20 世纪 80 年代末开发的字体标准。它是 macOS 和 Windows 操作系统使用最广泛的字体格式。
OTF 字体文件，即 OpenType 字体，是一种可缩放的计算机字体格式。它建立在 TrueType 基础上，是微软的注册商标。OpenType 字体目前在主要的计算机平台上广泛使用。
WOFF 字体文件，即 The Web Open Font Format 字体，是一种用于网页的字体格式，2009 年开发，如今是 W3C（万维网联盟）的推荐标准。WOFF 本质是 OpenType 或 TrueType 字体，但是经过压缩并附加额外的元数据。在带宽受限的网络中，WOFF 能更好的支持从服务器到客户端的字体传输。
WOFF 2.0 字体文件，相比于 WOFF，提供了更高的压缩效率。
SVG 字体，将 SVG 用作显示文本时的字形。SVG 1.1 规范定义了一个字体规范，允许在 SVG 文档中创建字体。
EOT 字体文件，即 Embedded OpenType Fonts 文件，是微软设计的一种用于网页的嵌入式字体，它是 OpenType 字体的紧凑形式。
不同字体格式的浏览器兼容性下图所示：
不同字体格式的浏览器兼容性，截图数据来自 w3schools.com
使用 @font-face CSS 指令定义自定义字体。使用前需要把字体文件放在服务器目录，然后定义新的字体名称，并指向字体所在位置。
以京華老宋体为例，这是一款可以免费商用的中文字体。下载字体文件后，放到和 index.html 同级的目录，重命名为 jh-song.ttf。
下载字体文件
在 @font-face 指令内，使用 font-family 定义字体名称，src 属性定义字体文件路径。
定义 web 字体
然后，像使用普通字体一样，使用自定义字体样式：
使用 web 字体
完
字是网页展示的重要内容之一，所以对文字的修饰也是CSS重点关注的一部分， CSS提供了以下常用的样式属性来修饰文字。
color 用来设置文字颜色。
设置方式支持以下几种格式
<style>
.box {
color: red;
}
</style>
<div class="box">文字颜色</div><style>
.box {
color: #ff0000;
}
.box1 {
color: #f00;
}
</style>
<div class="box">文字颜色</div>
<div class="box1">简写形式</div><style>
.box {
color: rgb(255, 0, 0);
}
</style>
<div class="box">文字颜色</div><style>
.box {
color: rgba(255, 0, 0, 0.5);
}
</style>
<div class="box">文字颜色</div>font-size 属性用来设置字体大小，单位通常为px 也可以为em,rem
单位的解释
<style>
.box {
font-size: 30px;
}
</style>
<div class="box">文字大小</div>设置字体的粗细程度，常用的属性有 normal 和 bold 两个值。
可以用以下值表示，也可以用数字表示。
值 | 意义 |
normal | 正常粗细，和400值相等 |
bold | 加粗，与700数值相等 |
lighter | 比 正常粗细还细， 不常用 |
bolder | 比 加粗还粗，不常用 |
100 200 300 400 500 600 700 800 900 | 使用数字定义字体粗细 |
inherit | 从父元素继承字体粗细 |
<style>
.box_normal {
font-weight: normal;
}
.box_bold {
font-weight: bold;
}
.box_lighter {
font-weight: lighter;
}
.box_bolder {
font-weight: bolder;
}
.box_number {
font-weight: 600;
}
</style>
<body>
<div class="box_normal">font-weight演示：正常粗细</div>
<div class="box_bold">font-weight演示，加粗</div>
<div class="box_lighter">font-weight演示，更细</div>
<div class="box_bolder">font-weight演示， 更粗</div>
<div class="box_number">font-weight演示， 数字</div>
</body>设置字体的倾斜程度
值 | 意义 |
normal | 正常字体， 不带倾斜效果 |
italic | 倾斜字体（常用，使用倾斜字体） |
oblique | 倾斜字体（用常规字体模拟倾斜，不常用） |
<style>
.box1 {
font-style: normal;
}
.box2 {
font-style: italic;
}
.box3 {
font-style: oblique;
}
</style>
<body>
<div class="box1">正常字体</div>
<div class="box2">倾斜字体</div>
<div class="box3">倾斜字体2</div>
</body>设置文本的修饰线的样式
示例 | 意义 |
none | 无线(a标签去除下划线会用到) |
underline; | 下划线 |
line-through; | 删除线 |
…等等 | 还有很多，可自行百度 |
<style>
.decoration-none {
text-decoration: none;
}
.decoration-underline {
text-decoration: underline;
}
.decoration-line-through {
text-decoration: line-through;
}
</style>
<body>
<div class="decoration-none">无线修饰</div>
<div class="decoration-underline">下划线</div>
<div class="decoration-line-through">删除线</div>
</body>指定使用的字体族，操作系统一般自带很多字体；
例如：window操作系统中的 ‘微软雅黑’ ，黑体等。
字体文件的格式有很多，比如 eot,woff2,woff,ttf,svg等。
font-family 可以一次指定多个字体， 后面的字体属于后备字体，只有前面的字体没有找到，才会使用后面的字体。
<style>
div {
font-family: serif, "Time New Roman", "微软雅黑"
}
</style>
<body>
<div>字体</div>
</body>自定义字体
某些时候，我们的字体比较个性化，或者我们的字体是一个图标字体（一种用符号表示图片的方式）。那么此时，需要我们使用 @font-face 自定义字体
自定义的字体一般是随着网页发布在服务器端，操作系统中并没有。
推荐一个比较好用的字体库网站：https://www.iconfont.cn/（具体使用方式请自行百度）。
*请认真填写需求信息，我们会在24小时内与您取得联系。
