1、第3章 字体标记,字体标记在网页中常常会用到，如一个标题字体需要设置特大字体且颜色是红色、字体类别使用宋体、楷体等。在HTML中有其字体标记，用来修饰文字字体方面属性，使文字显得更丰富。本章所学习的正好是应用非常广的字体，将要学习本本章前，会学习以下方面内容： 设置字体大小 字体颜色 设置标题字体 物理字体 逻辑字体 字体实例手把手,3.1 设置字体大小,字体的大小，在网页中常常可以看到，有的新闻网站为了满足不同年龄的读者浏览，有三种不同字体大小供选择，12像素、14像素和16像素，默认的都会是14像素大小。这样看起来舒服，适合大部分读者浏览，如老年人可能会选择大点的字体。现在来学习如何设置字
2、体大小。 合理的字体大小为网页增加不少装饰，更是一种美的感受。字体的语法为： 要放的文字 这只是在字体上的标记，以后的学习是在里面加一部分属性，也就达到对字体设置的效果了。现在来学习字体大小。设置字体大小的语法代码是： HTML+CSS完全自学手册 关键部分就是size，表示大小。等于后面的参数是有规定的，参数是从1到7的任意一个数，数越大字体也就越大。现在对字体大小从1到7编排。,3.2 设置字体颜色,通常在网页中看到的五彩缤纷的字体，有清醒一点的、有淡薄一点的，颜色搭配好了，用户从视觉上认可该网页，这样才有可能继续读下去。字体颜色的语法简单易学，是由color表示，语法形式如下：标签中的参
3、数color后面可以接RGB颜色值，如#000000。也可以用颜色的单词表示，如red。完整实例代码，如代码3.2所示。 代码3.2 源代码第3章颜色值表示的二种方式.html字体颜色html+css完全自学手册html+css完全自学手册 ,3.3 设置标题字体样式,关于标题，在前面一章中学过如何设置标题大小，但往往有时标题文字需要用颜色来表达其效果，在这里主要在前面的基础上再学习标题属性，如标题的颜色，标题大小。标题颜色和大小设置要用到标题标签（#代表不同大小的标题）和前面学习的字体颜色。,3.3.1 标题的字体,本节再次讲解标题h1到h6，然后在这些标题中设置不同的颜色和其他样式。标题用
4、表示的，#代表数字从1-6是表示标题大小从大到小，完整语法表述如下所示。 设置标题h1 设置标题h2 设置标题h3 设置标题h4 设置标题h5 设置标题h6 由系统提供的标题大小只有这6种，其中h1字体最大，相应的，h6是最小的。为了体现这些字体的大小，代码3.3演示了各个标题的大小，设置标题字体只需要在标题标签内输入文字就可以了。,3.3.2 设置字体的大小和颜色,上一小节的代码显示出标题字体的大小与颜色。用标记font可以设置文本对象的大小，同时还可以对标题标记设置其大小或颜色，也可以设置标题带下划线，删除线等这些样式，代码3.4即表示在标题中设置字体的大小与颜色。,3.4 物理字体,在第
5、2章中介绍了常用的HTML标记，这些标记也是本小节要介绍的字体标记，字体分为物理字体和逻辑字体，本小节先来介绍前者物理字体。物理字体在工作中常会用到。尽管在前面章节介绍过部分标记，但现在还有必要罗列出来。与其他标记一起比较，从而达到更高的学习效率。 以下是所有物理字体列表，中间的省略符代码放置的文本内容，通过标记对修饰，后面的文字说明其功能。 ，将字符设置成粗体。 ，将字符设置成斜体。 ，给字符增加下划线。 ，给字符增加删除线。 ，将字符设置成打字机字体。 ，将字符设置成上标字体。 ，将字符设置成下标字体。,3.5 逻辑字体,双标记对的逻辑字体和物理字体很相似，都是由标记对组成的，但它们所体现
6、的重点不同，逻辑字体所显示出来的更有美观感。 接下来一一介绍更有意思的逻辑字体，这可能很少见到，但作用很大。如在网页上表现代码形式的字符等。先看一下，语法形式如下： 代码 说明：语法先大概了解，实例会在下一章讲解。 以下是所有物理字体列表，中间的省略符代码放置的文本内容，通过标记对修饰，后面的文字说明其功能。 强调文字。 字体加重。 显示编程代码。 显示示例文字。 显示键盘按键文字。 缩小文字。 放大文字。,3.6 字体实例手把手,本章主要讲解字体标记的用法，字体分为物理字体和逻辑字体，并可以设置字体的大小和颜色等，本实例从字体入手，对字体大小、颜色等样式演示，以下按步骤一步一步的讲解。,3.
7、6.1 插入字体,在HTML基本结构代码中，输入字体标记，标记对内的内容为“HTML+CSS完全自学手册”，代表控制这行文本的字体，代码3.7表示文字在内。 代码3.7 源代码第3章字体实例手把手.html字体实例HTML+CSS完全自学手册通过在网页体中输入字体标记，即插入一行文本，这行文本被字体标记修饰着，在没有设置其他参数条件下，各参数都为默认值，效果如图3.7所示。,3.6.2 字体颜色设为红色,字体颜色设为红色，代码变化部分只在内。HTML+CSS完全自学手册 上面代码是修改部分，其他部分没变。效果如图3.8所示。,3.6.3 把文字设为标题h1,把文字设为标题h1，如下所示。HTM
8、L+CSS完全自学手册 加上标题后的效果如图3.9所示。,3.6.4 设为斜体并加删除线,设为斜体并加删除线的代码如下所示。HTML+CSS完全自学手册 添加删除线后的效果如图3.10所示。,3.6.5 设置字体为,设置字体为的代码如下所示。HTML+CSS完全自学手册 字体变大后的效果如图3.11所示。,3.7 小结,本章所学的都是字体各方面的属性，分别介绍了字体的大小、颜色、标题，还有物理字体和逻辑字体。通过对标题的学习，可以把物理字体的标记用在标题标记上，使标题字体更丰富。最后通过实例演示了字体标记的各知识点的用法，共5个步骤，一步一个知识点，最后完成的是一个综合效果。学好本章对以后从事网页设计、制作很有帮助，在后面的章节中也常会涉及到本章内容。,
