整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
体
1、使用CSS属性指定和改变字体外观，常见的属性有：
font-style: italic; 定义字体的风格
font-weight: bold; 定义字体粗细
font-size: 20px; 定义字体大小
line-height: 30px; 定义一段文字的行高
还可以使用简写形式，把所有属性值放到font属性中，如：
p {
font: italic bold 20px/30px 微软黑体;
}2、Font-family 属性可以设置文字字体样式，比如常用的中文字体有：微软雅黑，黑体，宋体等；常用的英文字体有：Verdana，arial，Times New Roman等。Font-family 后面可以定义一个字体，也可以定义一个字体列表。为什么需要使用字体列表呢？因为我们无法控制用户计算机上安装什么字体，不仅如此，往往操作系统也不一样，比如在苹果的Mac电脑上有的字体，在微软的Windows上就不一定有，所以最好为字体指定一个可选的字体列表。字体列表实际上就是一个字体有限列表，如下，第一个微软雅黑是我希望使用的，浏览器会尽力加载这个字体，如果用户电脑上没有这个字体就使用第二个备用字体，依次类推，字体列表最后面应该制定一个通用字体系列。
p{
font-family: 微软雅黑, 黑体, Arial, Helvetica, sans-serif;
}3、什么是通用字体系列？在CSS中定义了5个通用字体系列：
· Sans-serif字体系列：无衬线字体，笔画粗细一致，在计算机屏幕上更容易阅读
· Serif字体系列：有衬线字体，笔画末端有装饰性的线条或凸起，报纸正文中使用的字体
· Monospace字体系列：等宽字体，每个字母宽度一致，用于显示软件代码示例
· Cursive字体系列：手写体
· Fantasy字体系列：装饰性字体，设计感较强
所以，候选字体列表中的字体通常来自于同一个字体系列，这样当浏览器找不到优先定义的字体使用备用字体时，页面展示的效果不会有太大的变化。如果前面指定的特定字体都没有找到，浏览器就从sans-serif字体系列中找一个默认的字体。
4、font-size 调整字体大小的方法有三种：
1）使用像素px，如：
字体大小
注意：20和单位px之间不能有空格，文字的大小就是文字的最低部分和最高部分之间时20像素
2）使用%定义字体大小就是相对于父元素的字体大小，如：p标签时body的子标签，body定义的字体大小是20px，所以子标签p的字体大小是父标签的150%即30px。
字体大小
3）使用em调整字体大小，类似于百分数，也是一个相对的度量单位，使用em的时候要指定一个比例因子，p标签是父标签字体大小的1.2倍即24px。
字体大小
5、font-weight 属性可以改变字体的粗细，bold为粗体，normal为去掉粗体的样式。
字体粗细
字体的粗细还有lighter为稍细，bolder稍粗，或者使用数字100、200-900，但是这些都没有得到字体和浏览器的广泛支持，通常并不适用，了解即可。
6、font-style为字体增加风格
字体风格
有三个可能的值：normal（正常），italic（斜体字符），oblique（倾斜文本）；其中italic是专门为正常字体设计的斜体字符，oblique没有专门的斜体字符，由浏览器负责把正常的字体倾斜显示，因为不是所有的字体定义了斜体字符，所以使用italic定义字体风格时，浏览器找不到这个字体的斜体字符，就通过oblique把正常的字体倾斜显示，有时候看着是一样的，有时候则不同，除非非要区分斜体和倾斜文本，不然可以选择一种使用。
7、line-height 调整行高，定义一个盒子内每一行文字之间的距离。
字体行高
每天进步一点点，跟着教头学开发。
节我们来讲字体样式，之前我们学习 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> 标签上设置，这样就不用一个个标签去设置。
background-color 属性为元素定义了背景颜色：
<html> <body style="background-color:yellow"> <h2 style="background-color:red">This is a heading</h2> <p style="background-color:green">This is a paragraph.</p> </body> </html>
HTML样式：好看的颜色字体是有方法的
*请认真填写需求信息，我们会在24小时内与您取得联系。
