整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
于所有Web开发人员来说，无论你选择的是哪种框架或后端语言，都需要大量使用HTML（超文本标记语言）。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
</body>
</html>12345678910111213141516复制代码类型：[html]图示
h的级别越小文字大小越小。
当然了，这些文字标题都是左对齐的。
其实在标题标记中还有重要的属性！详情见文章------
我们可以给<h1>，<h2>......等标记加属性值让其变得更加多样化！
代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<h1 align="center">1级标题</h1>
<h2 align="left">2级标题</h2>
<h3 align="right">3级标题</h3>
<h4 align="justify">4级标题</h4>
<h5 align="right">5级标题</h5>
<h6 align="center">6级标题</h6>
</body>
</html>12345678910111213141516复制代码类型：[html]图示
align标记在----文章已经有些许叙述，我们再来讲讲吧。
<h1 align="center"></h1> <!--居中-->
<h2 align="left"</h2> <!--左对齐-->
<h3 align="right"></h3> <!--右对齐-->
<h4 align="justify"></h4><!--段落两端对齐-->1234复制代码类型：[html]所以图示才是如此显示的。
开课吧广场-人才学习交流平台
网络安全字体是由许多操作系统预先安装的字体。虽然不是所有的系统都安装了相同的字体，但你可以使用网络安全字体堆栈来选择几种看起来类似的字体，并且安装在你想支持的各种系统上。如果你想使用预装字体以外的字体，从CSS3开始，你可以使用网络字体Web fonts - Learn web development | MDN。
Web safe fonts are fonts that are pre-installed by many operating systems. While not all systems have the same fonts installed, you can use a web safe font stack to choose several fonts that look similar, and are installed on the various systems that you want to support. If you want to use fonts other than ones pre-installed, as of CSS3, you can use Web Fonts.
相比通常只有几十 KB 的英文字体，网页加载一个 GB2312 的中文字体至少要增加 2 MB 以上加载量，而大部分中文字体都在 5 MB 以上。所以网络字体在国内没有流行起来，还是要像英文网页好多年前一样，用网页安全字体。
下表可以看到各系统预置的中文字体——各系统根本没有相同的字体，即没有网页安全中文字体！
系统 | 预置中文字体 |
Mac OS X | 华康苹方 Pingfang（10.11 开始） 冬青黑体: Hiragino Sans GB （10.6 开始） 华文细黑：STHeiti Light （又名STXihei） 华文黑体：STHeiti 华文楷体：STKaiti 华文宋体：STSong 华文仿宋：STFangsong |
Windows | 微软雅黑: Microsoft YaHei（Windows 7开始） 黑体: SimHei 宋体: SimSun 新宋体: NSimSun 仿宋: FangSong 楷体: KaiTi 仿宋GB2312: FangSong_GB2312 楷体GB2312: KaiTi_GB2312 |
Android | Droid Sans Fallback |
iOS | 苹方（iOS 9开始） 黑体：Heiti SC (iOS 8) 华文黑体：STHeiti（iOS 7.0 及以下） |
与网络安全字体不同，网络字体没有预先安装在用户的系统中。这些字体是由用户的浏览器在渲染网页时下载的，然后应用于你的文本。使用网络字体的主要缺点是它会减慢你网站的加载时间。在旧的浏览器中，对CSS3的支持也很有限，而使用网络字体是需要CSS3的。后面的限制可以通过使用字体堆栈来弥补，类似于网络安全字体堆栈，但包括一个网络字体作为堆栈的第一个字体。如果浏览器无法使用网络字体，它就会退回到堆栈中的网络安全字体。
Unlike web safe fonts, web fonts are not pre-installed on the user's system. The fonts are downloaded by the user's browser while rendering the webpage, and then applied to your text. The main drawbacks of using web fonts is it will slow your site's load time. There is also limited support for CSS3 in older browsers which is required to use web fonts. The later limitation can be remedied by using a font stack, similar to the web safe font stacks, but including a web font as the first font of the stack. If a browser is unable to use the web font it will fall back on the web safe fonts in the stack.
Web 字体是一种 CSS 特性，允许我们指定在访问时随您的网站一起下载的字体文件，这意味着任何支持 Web 字体的浏览器都可以使用指定的字体。所需的语法如下所示：
首先，在 CSS 的开始处有一个@font-face块，它指定要下载的字体文件：
@font-face {
font-family: "myFont";
src: url("myFont.ttf");
}在这个下面，你可以使用 @font-face 中指定的字体种类名称来将你的定制字体应用到你喜欢的任何东西上，比如说：
html {
font-family: "myFont", "Bitstream Vera Serif", serif;
}关于网页字体有两件重要的事情要注意：
serif 是一种具有装饰性小横线的字体族，这些小横线被称为“衬线”。Serif 字体通常被用于印刷材料中，如书籍、杂志、报纸等，因为它们的衬线可以增强字体的可读性和易读性。常见的 Serif 字体包括 Times New Roman、Georgia、和 Garamond。
sans-serif 是一种不带装饰性小横线的字体族。这种字体通常被用于数字屏幕上，如电脑、手机和电视。与 Serif 字体相比，Sans-serif 字体看起来更现代、更简洁。常见的 Sans-serif 字体包括 Arial、Helvetica 和 Verdana。
monospace 是一种字母宽度相等的字体族，每个字符都占据相同的宽度。Monospace 字体通常用于计算机编程、打印机输出和其他需要对齐文本的应用程序。常见的 Monospace 字体包括 Courier、Consolas 和 Monaco。
cursive 是一种仿效手写的字体族，具有曲线、流畅的线条。这种字体通常被用于设计师、艺术家和文具爱好者等需要体现个性和艺术感的场合。常见的 Cursive 字体包括 Brush Script、Lucida Calligraphy 和 Comic Sans。
fantasy 是一种具有艺术性和独特性的字体族，经常用于海报、书籍封面和广告等场合。这种字体的外形往往是有趣、古怪、奇特或装饰性的，常常包含有装饰性的花纹或图案。常见的 Fantasy 字体包括 Harrington、Viner Hand ITC 和 Zapfino。
Script 字体族是一类字体，通常被设计用于模拟手写或手绘效果，以及营造一种自然、随意的艺术氛围。这类字体通常具有不规则的笔画、流畅的曲线和变化多端的字母间距，使得文本看起来像是手写而非打印。Script 字体族的应用领域非常广泛，例如印刷品设计、标志设计、广告设计等。常见的 Script 字体有 Brush Script、Lobster、Pacifico、Vibur 等。
为了确保中文字符在不同计算机和浏览器上的正确显示，网页设计or开发者可以考虑：
需要注意的是，尽管某些字体在设计中看起来很不错，但并不一定适合用作 Web 安全字体。设计or开发者需要权衡字体的外观和可用性，选择最适合自己需求的中文 Web 安全字体。
节我们来讲字体样式，之前我们学习 HTML 的时候学过一些用于字体加粗、倾斜的标签，但是使用标签来实现的效果肯定没有我们通过 CSS 中的样式来的方便。
接下来我们会给大家介绍下面这几个属性的使用：
通过学习上述这几个 CSS 属性，我们可以实现给 HTML 中的文字设置字体、大小、风格、倾斜、加粗等。
font-family 属性用于设置一个元素的字体，字体就是像宋体、楷体等。
通过 font-family 属性，可以同时声明多种字体，字体之间使用逗号分隔。根据字体的调用原则，会优先调用第一种字体，如果没有找到，则会尝试调用下一个字体，如果都找不到则调用默认字体。
示例：
例如为下面这个 <p> 标签中的文本设置字体：
<p>Hello，侠课岛</p>
可以使用标签选择器，然后在 font-family 属性中设置：
p{
font-family:'Times New Roman','sans-serif', 宋体, 楷体;
}
在声明字体时，我们应该分别声明英文字体和中文字体，且英文字体的声明应该在中文字体之前。因为绝大部分中文字体里包含英文字母，但是不是很好看，而英文字体里不包含中文字符。所以如果我们不希望用中文字体来显示英文，就一定要记得先声明英文字体。先声明的会先调用。
常用英文字体：Arial、Helvetica、Tahoma、Verdana、Lucida Grande、Georgia 等。
常用中文字体：宋体 SimSun、黑体 SimHei、微软雅黑 Microsoft YaHei、仿宋 FangSong、楷体 KaiTi 等。
font-size 属性用于设置字体的大小，常用的单位为 px，即像素。
px 是 Pixel 的缩写，是可以在数字显示设备上显示和表示的数字图像或图形的最小单位。像素是数字图形中的基本逻辑单元，像素也称为图像元素。
示例：
例如我们来看下面这段代码（其他HTML结构代码没有展示出来）：
<body>
<h1>断句</h1>
<p>近水楼台先得月，向阳花木易为春。</p>
</body>
在浏览器中的演示效果为：
然后此时，我们通过 font-size 来将其中的 <h1> 标签中的字体设置为 14px，<p> 标签中的字体设置为 20px：
h1{
font-size: 14px;
}
p{
font-size: 20px;
}
在浏览器中演示效果就变为了下图所示：
很明显，通过 CSS 中的 font-size 属性可以设置任意标签中的字体大小。
font-style 设置字体的风格，可以将字体设置成斜体、倾斜或正常字体。斜体字体通常定义为字体系列中的一个单独的字体。
此属的常用属性值如下所示：
示例：
将下面三个 <p> 中的内容设置为不同的字体风格，可以使用类选择器：
<body>
<p class="normal">将字体设置为标准的字体样式</p>
<p class="italic">将字体设置为斜体的字体样式</p>
<p class="oblique">将字体设置为倾斜的字体样式</p>
</body>
CSS 样式代码：
.normal {
font-style:normal;
}
.italic {
font-style:italic;
}
.oblique {
font-style:oblique;
}
在浏览器中演示效果如下所示：
font-weight 属性用于设置显示元素的文本中所用的字体加粗。
此属性的常用属性值如下所示：
示例：
将下面的 <p> 标签的粗细分别设置为 normal、bold、700、900：
<p class="w1">将字体设置为:normal</p>
<p class="w2">将字体设置为:bold</p>
<p class="w3">将字体设置为:700</p>
<p class="w4">将字体设置为:900</p>
CSS 样式代码：
.w1 {
font-weight: normal;
}
.w2 {
font-weight: bold;
}
.w3 {
font-weight: 700;
}
.w4 {
font-weight: 900;
}
在浏览器中演示效果：
font 属性用于在一个声明中设置所有的字体属性，各个属性之间使用空格隔开。也就是上述几个属性的综合简写属性。
如果我们使用 font 属性来设置字体样式，设置顺序分别是：font-style、font-variant、font-weight、 font-size/line-height、font-family。可以不设置其中的某个值，未设置的属性会使用其默认值。
示例：
<p class="p1">草长莺飞二月天，拂堤杨柳醉春烟。</p>
<p class="p2">留连戏蝶时时舞，自在娇莺恰恰啼。</p>
CSS 样式代码：
.p1{
font: italic bold 20px 'sans-serif', 楷体;
}
.p2{
font: bold 14px 'Arial', 宋体;
}
在浏览器中演示效果：
注意，在使用 font 属性时，font-size 和 font-family 的值是必需的，如果没有设置这两个属性值，则不会生效。
本节学习的几个属性值都是 CSS 中最基本的属性，特别是 font-size 属性，我们会经常用到。一般浏览器会有一个默认的字体大小，例如 16px，而编写页面时如果我们希望大部分页面内容正文字体大小为 12px 或 14px，就会在 <body> 标签上设置，这样就不用一个个标签去设置。
*请认真填写需求信息，我们会在24小时内与您取得联系。
