（7）css常用属性2

最新推荐文章于 2025-04-28 11:04:39 发布

泽哥ins

最新推荐文章于 2025-04-28 11:04:39 发布

阅读量4.2k

点赞数

分类专栏： CSS3 文章标签：前端 css css3

本文链接：https://blog.youkuaiyun.com/qq_36213140/article/details/121530524

版权

CSS3 专栏收录该内容

53 篇文章

订阅专栏

一、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>