CSS核心样式(1)——字体类样式(常用的4种属性)

发布于 2021-4-6 18:16
浏览
0收藏

首先继续上篇讲解了字体类样式的2个基础属性:字体属性font-family,字号属性font-size;
这篇继续介绍:字体类样式(常用的4种属性)

CSS核心样式(1)——字体类样式(常用的4种属性)-开源基础软件社区

一、粗细 font-weight

CSS核心样式(1)——字体类样式(常用的4种属性)-开源基础软件社区示例:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>字体粗细属性font-weight</title>
  <style>
    .ps1 {
      font-weight: 700; /* 等价于font-weight:bold */
    }
    .ps2 {
       font-weight: normal;
    }
    .ps3 {
       font-weight: lighter;
    }
    </style>
</head>
<body>
  <p class="ps1">看看文字是否加粗显示?</p>
  <b>这是 b 标签内部的文字</b><!--加粗效果跟b标签效果做对比-->
  <p class="ps2">看看文字是否正常粗细显示?</p>
  <p class="ps3">看看文字是否更细显示?</p>
  </body>
</html>

CSS核心样式(1)——字体类样式(常用的4种属性)-开源基础软件社区

二、字体风格 font-style
CSS核心样式(1)——字体类样式(常用的4种属性)-开源基础软件社区
示例:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>字体风格属性font-style </title>
  <style>
    .fs1 {
      font-style: normal;
    }
    .fs2{
      font-style: italic;
    }
    .fs3 {
      font-style: oblique;
    }
  </style>
</head>
<body>
  <p class="fs1">看一下文字是否正常显示?normal</p>
  <p class="fs2">看一下文字是否进行斜体显示?italic</p>
  <p class="fs3">看一下文字是否进行倾斜显示?oblique</p>
  <i>这是i标签内部的文字</i><!--与i标签效果做对比-->
</body>
</html>

CSS核心样式(1)——字体类样式(常用的4种属性)-开源基础软件社区
三、行高 line-height
CSS核心样式(1)——字体类样式(常用的4种属性)-开源基础软件社区(实际应用中通过设计图获取,量取数值时需要使用一些辅助工具,比如:FireWorks)


用Fireworks量取行高的步骤:
1.软件初始设置:选中文字工具,在属性栏中将平滑消除锯齿, 更改为不消除锯齿,方便文字的像素点清晰显示。

CSS核心样式(1)——字体类样式(常用的4种属性)-开源基础软件社区2.确定文字字号和字体。使用文字工具,书写两个与内容相同的文字,调整字号和字体,直到两个文字都完全重合,就是我们需要的字号和字体。制作时,设 置一个与内容文字颜色差异较大的字体颜色。
3.根据已知的字号和字体,再书写上下对齐的两行文字,调整属性面板的行高值单位为像素,更改数值大小,直到两行文字都对齐,得到的就是我们需要的行高值。

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

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

font: 14px "arial" "SimSum" "Microsoft Yahei";


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

font: 14px/28px "arial" "SimSum" "Microsoft Yahei";


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

font: italic bold 14px/28px "arial" "SimSum" "Microsoft Yahei";

 

font: bold italic  14px/28px "arial" "SimSum" "Microsoft Yahei";


版权声明:本文为博主「倏存」的原创文章

收藏
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐