6.CSS字体属性

.字体大小(font-size)

font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。其中，相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。具体如下：
1em 等于当前的字体尺寸。如果一个元素的 font-size 为 16 像素，那么对于该元素，1em 就等于 16 像素。在设置字体大小时，em 的值会相对于父元素的字体大小改变。浏览器中默认的文本大小是 16 像素。因此 1em 的默认尺寸是 16 像素。可以使用这个公式将像素转换为 em：px/16=em（注：16 等于父元素的默认字体大小，假设父元素的 font-size 为 20px，那么公式需改为：px/20=em）

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .my-font-size{            font-size: 28px;        }</style></head><body>    <div>码海无际</div>    <div class="my-font-size">码海无际</div></body></html>

2.定义字体(font-family)

font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等。
可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。
在 CSS 中设置字体名称，直接写中文是可以的。但是在文件编码（GB2312、UTF-8 等）不匹配时会产生乱码的错误。xp 系统不支持类似微软雅黑的中文。可以使用英文来替代。比如 font-family:"Microsoft Yahei"。直接使用 Unicode 编码来写字体名称可以避免这些错误。使用 Unicode 写中文字体名称，浏览器是可以正确的解析的，font-family: "FAEF6FC5ED1"，表示设置字体为“微软雅黑”。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .my-font-family{            /*font-family: 宋体;*/            /*font-family: SimSun;*/            /*font-family: B8BF53;*/            font-family: B8BF53,ED1F53;        }</style></head><body>    <div>码海无际</div>    <div class="my-font-family">码海无际</div></body></html>

3.字体加粗(font-weight)

范围值 100 ~ 900 为字体指定了加粗级别。如果一个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别，100 对应最细的字体变形，900 对应最粗的字体变形。数字 400 等价于 normal，而 700 等价于 bold。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .my-font-weight{           /*font-weight: bold;*/           font-weight: 700;        }</style></head><body>    <div>码海无际</div>    <div class="my-font-weight">码海无际</div></body></html>

4.字体风格(font-style)

常用于设置斜体文本，该属性有三个值：

normal - 文本正常显示
italic - 文本斜体显示
oblique - 文本倾斜显示

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .my-font-style{            font-style: italic;        }</style></head><body>    <div>码海无际</div>    <div class="my-font-style">码海无际</div></body></html>

5.综合设置字体样式 (font)

font属性用于对字体样式进行综合设置
可设置的属性是（按顺序）："font-style font-weight font-size/line-height font-family"
font-size和font-family的值是必需的。如果缺少了其他值，默认值将被插入，如果有默认值的话。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .my-font-one {            font-style: italic;            font-weight: bold;            font-size: 20px;            font-family: 宋体;        }        .my-font-two {            font: italic bold 20px 宋体;        }        .my-font-three {            font: 20px 宋体;        }</style></head><body>    <div>码海无际</div>    <div class="my-font-one">码海无际</div>    <div class="my-font-two">码海无际</div>    <div class="my-font-three">码海无际</div></body></html>

、什么是HTML

HTML简介

HTML是用来描述网页的一种语言，它是一种超文本标记语言，由一套标记标签组成，在制作网页时，HTML使用标记标签来描述网页。

发展史

HTML：Hyper Text Markup Language超文本标记语言

超文本标记语言—在1993年6月互联网工程工作小组工作案发布（并非标准）

HTML2.0—1995年11月作为RFC1866发布，在RFC2854于2000年6月发布之后被宣布过时。

HTML3.2—1996年1月14日，W3C推荐标准

HTML4.0—1997年12月18日，W3C推荐标准

HTML4.01（微小改进）—1999年12月24日，W3C推荐标准，2000年5月15日发布基本严格的HTML4.01语法，是国标标准化组织和国际电工委员会的标准

XHTML1.0—发布于2000年1月26日，是W3C推荐标准，后来经过修订于2002年8月1日重新发布

XHTML1.1—2001年5月31日发布

XHTML2.0是W3C的工作草案，由于改动过大，学习这个新技术的成本过高而最终胎死腹中，因此，现在最常用的还是XHTML1.0标准。

目前最新的版本为HTML5，它是2004年被提出，2007年被W3C接纳并成立新的HTML工作团队，

2008年1月22日公布HTML5第一份正式草案，

2012年12月17日HTML5规范正式定稿，

2013年5月6日，HTML5.1正式草案公布。

HTML 5作为最新版本，提供了一些新的元素和一些有趣的新特性，同时也建立了一些新的规则。这些元素、特性和规则的建立，提供了许多新的网页功能，如使用网页实现动态渲染图形、图表、图像和动画，以及不需要安装任何插件直接使用网页播放视频等。目前企业开发中也在增大使用HTML5的力度

HTML的优势

各大浏览器厂商对H5的支持
市场的需求
跨平台

二、HTML的基本结构

<html>......</html> HTML文档的开始和结束标记。
<head>……</head> 头控制标记，不在界面上进行展示，子标签可设置SEO优化的一些内容以及设置网页的编码。
<title>……</title>：设置浏览器的窗口上标题。
<body>……</body>：页面可见内容。

三、HTML的基本标签

标题标签

h1~h6

源代码

<!DOCTYPE html>

<head>

</head>

<body>

<h1>这是一级标题</h1>

<h2>这是二级标题</h2>

<h3>这是三级标题</h3>

<h4>这是四级标题</h4>

<h5>这是五级标题</h5>

<h6>这是六级标题</h6>

<h7>这是七级标题</h7>效果怎么显示不出来呢？？？

<h1>这是一级标题</h1>

</body>

</html>

浏览器预览效果

段落标签和换行标签

p标签为段落标签，br标签为换行标签

源代码

<!DOCTYPE html>

<head>

<title>段落和换行标签</title>

</head>

<body>

<h1>北京欢迎你</h1>

<p>北京欢迎你，<br>为你开天辟地</p>

<p>北京欢迎你，<br/>有有勇气就会有奇迹</p>

</body>

</html>

浏览器预览效果图

水平线标签

hr标签为水平线标签

源代码

<!DOCTYPE html>

<head>

<title>水平线标签</title>

</head>

<body>

<h1>漂洋过海来看你</h1>

<hr>

<p>为你我用了半年的积蓄，<br>漂洋过海来看你</p>

<hr/>

</body>

</html>

浏览器预览效果图

字体样式标签

em为斜体标签，strong为字体加粗标签

源代码

<!DOCTYPE html>

<head>

<title>字体样式标签</title>

</head>

<body>

<h1>漂洋过海来看你</h1>

<hr>

<p>为你我用了<em>2017</em>半年的<strong><em>积蓄</em></strong>，<br>

<em><strong>漂洋过海</strong></em>来看你

</p>

<hr/>

</body>

</html>

浏览器预览效果图

注释和特殊符号

注释使用：

大于号：> great than的缩写

小于号：< less than的缩写

双引号：""

版权符号：©

空格：

源代码

<!DOCTYPE html>

<head>

<title>注释和特殊符号</title>

</head>

<body>

<pre>

注释使用：

大于号：> great than的缩写

小于号：< less than的缩写

双引号：""

版权符号：©

空格：

</pre>

5<10>6 <br>

"我是被双引号引起来的内容"<br>

©自由职业开发者公司<br>

我是测试空格的

</body>

</html>

浏览器预览效果图

以上就是HTML的简单入门，后续带大家更深入的了解HTML

节我们来讲字体样式，之前我们学习 HTML 的时候学过一些用于字体加粗、倾斜的标签，但是使用标签来实现的效果肯定没有我们通过 CSS 中的样式来的方便。

接下来我们会给大家介绍下面这几个属性的使用：

通过学习上述这几个 CSS 属性，我们可以实现给 HTML 中的文字设置字体、大小、风格、倾斜、加粗等。

font-family

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

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

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

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 属性来设置字体样式，设置顺序分别是：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> 标签上设置，这样就不用一个个标签去设置。

在线咨询

上一篇：当您在浏览器中输入网址时会发生什么？
下一篇：Arm 发布 Neoverse 新品：数据分析性能提

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

6.CSS字体属性

.字体大小(font-size)

2.定义字体(font-family)

3.字体加粗(font-weight)

4.字体风格(font-style)

5.综合设置字体样式 (font)

、什么是HTML

二、HTML的基本结构

三、HTML的基本标签

font-family

font-size

font-style

font-weight

font

总结

您的项目需求