一、font-weight属性

1.1font-weight属性的作用

作用：设置文字是否加粗显示。

属性名：font-weight，属于 font 属性的一个单一属性。

属性值有两种方式：单词类型、数字类型。

1.2font-weight属性单词类型

属性值：normal：默认值，定义标准的字体

bold：定义粗体字符，b、strong标签的默认值。

bolder：定义更粗的字体

lighter：定义更细的字体

示例：

定义4个p标签

<body> <p class="p1">这是normal正常的字体</p><p class="p2">这是bold加粗的字体</p><p class="p3">这是bolder更粗的字体</p><p class="p4">这是lighter更细的字体</p>
</body>

给4个p标签设置不同的font-weight属性值

<style>.p1 {font-weight: normal;}.p2 {font-weight: bold;}.p3 {font-weight: bolder;}.p4 {font-weight: lighter;}
</style>

运行结果

1.3font-weight属性数字类型

100-900 之间的整百数字。

数字越大，文字显示越粗。

其中 400 等价于 normal，700 等价于 bold。

示例：

我们通过类名p1设置的normal和类名p2设置的400进行对比，通过p3类名设置的bold和类名p4设置的700对比。结果如下：

二、font-style属性

2.1font-style字体风格属性作用

它是用来设置文字是否斜体显示。

属性名：font-style，属于 font 属性的一个单一属性。

属性值：单词。

实际应用中，更多的斜体效果习惯使用italic属性值。例如b标签它默认带有italic的斜体样式。

示例：

三、line-height行高属性

3.1line-height属性的作用

作用：设置的是一行文字实际占有的高度，文字字号在行高中是垂直居中的。

属性名：line-height，属于 font 属性的一个单一属性。

属性值：

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>line-height属性</title>   <style>.demo {font-size:14px;}</style>
</head>
<body> <div class="demo">这是div标签</div>
</body>
</html>

通过以上示例，我们看到我们的div元素没有设置宽高度，是通过我们设置文字大小进行撑开的高度，那么为什么我们设置的明明是14px像素，但是实际我们打开浏览器控制台它显示的是18.4px呢？多出的那4.4px是哪里来的呢？这是因为它文字的默认带的行高是4.4px。实际应用中，行高的数值通过设计图获取，量取数值时需要使用一些辅助软件工具。比如推荐一款软件，fireworks。

3.2Fireworks软件

Fireworks软件初始设置：选中文字工具，在属性栏中将平滑消除锯齿，更改为不消除锯齿，方便文字的像素点清晰显示。

3.3量取行高的步骤

第一步：确定文字字号和字体。使用文字工具，书写两个与内容相同的文字，调整字号和字体，直到两个文字都完全重合，就是我们需要的字号和字体。制作时，设置一个与内容文字颜色差异较大的字体颜色。输入"一个" 两个字，确定文字是什么字体，一般中文文字就2种情况，”微软雅黑“和"宋体"。输入好之后，换一个颜色的字体，然后进行像素调节，使用移动工具拖动文字，使我们输入的文字和原图文字进行重合，这样得到的是字体大小，即为font-size的值。

第二步：那么行高呢？行高我们可以在该输入框换行输入一个"要"字，当把行高调节到与原图一致，就是行高。所以根据已知的字号和字体，再书写上下对齐的两行文字，调整属性面板的行高值单位为像素，更改数值大小，直到两行文字都对齐，得到的就是我们需要的行高值。

这里的14就是我们的字体大小，28就是我们的行高。

3.我们也可以使用量尺工具和切片工具进行测量行高。

四、字体综合font属性

字体、字号、行高、加粗、斜体都是font综合属性的单一属性。 font属性五个单一属性的值可以进行合写，属性值可以有2到多个，值之间用空格进行分隔。

4.1font综合书写方式一

font进行综合书写时，必须有字号和字体参与，而且必须字号在前，字体在后，不能颠倒顺序。

<style>p {font: 14px "宋体";}
</style>

如果顺序颠倒，会出现如下结果，它说你写的是一个不合法的属性值，所以不生效。

4.2font综合书写方式二

font属性经常对字体、字号、行高进行合写，书写顺序必须是字号、行高、字体，字号和行高之间必须用/进行分隔。

<style>p {font: 14px/28px "宋体";}
</style>

同样的，如上写法顺序也是不可以颠掉的，必须按照规定规范书写。

4.3font综合书写方式三

如果font属性需要设置加粗和斜体，两个属性值只能写在最前面，两个值之间可以互换位置。后面的字号、行高、字体不能更改位置。

所以正确的写法有2种，第一种如下图：

 <style>p {font: bold italic 14px/28px "宋体";}</style>

第二种：

<style>p {font: italic bold 14px/28px "宋体";}
</style>

（7）css常用属性2相关推荐

css规则中区块block,css常用属性总结：背景background下篇
前言:这段时间天天加班到10:30之后,简直是x了. 在上一篇文章中,分别解析了background各个属性的用法和注意细节.如果我们在项目上使用背景效果,如果使用下面的写法,你可能抓狂. body{ ...
CSS入门（CSS常用属性----字体、对齐方式、display属性、浮动）
CSS常用属性设置 3.字体设置字体 font-family ①当font-family的属性值包含空格或特殊字符时,需要将font-family的属性值用引号括起来. ②font-family有& ...
从零开始学前端 - 5. CSS常用属性
作者: 她不美却常驻我心博客地址: https://blog.csdn.net/qq_39506551 微信公众号:老王的前端分享每篇文章纯属个人经验观点,如有错误疏漏欢迎指正.转载请附带作者信息 ...
第四次网页前端培训（CSS常用属性与盒子模型）
CSS常用属性背景 <head><meta charset="utf-8"><title>常用属性设置</title><st ...
Html中CSS常用属性
Html中CSS常用属性一.注释在style标签中注释的书写使用"/* 注释内容 */",而不是. 二.文字属性用于对文字进行修饰的属性 ...
CSS常用属性之display属性（六）
display属性在日常使用中会经常用到,但是它的一些特点及作用可能有很多小伙伴都不太清楚,接下来就让我来详细介绍一下吧. CSS display属性 1.display 属性的作用 2.元素外部显示 ...
2021-11-15 入门前端VScode必装的常用插件, HTML+CSS常用属性速记.
Html + Css 学习一.VSCode常用 //1. VScode常用快捷键 * 新建文件:ctrl + N * 切换自动换行:alt + Z * 复制当前行:ctrl + C:ctrl + V ...
CSS常用属性之文本属性（四）
CSS常用文本属性主要有:text-decoration.text-indent.line-height.font.text-align.word-spacing.letter-spacing等等.. ...
5中div标签有没有url属性_[网页编程]-03 CSS 常用属性
字体处理常用属性 <!DOCTYPE html> <html><head><meta charset="utf-8"><tit ...
CSS常用属性速查表
属性太多,对于我这种不深入WEB的人员,还是有个速查表方便多了,注意利用开头的目录,会不断更新的 CSS 字体属性(Font) 属性描述 CSS font 在一个声明中设置所有字体属性. 1 f ...

（7）css常用属性2