回复
CSS核心样式（1）——字体类样式（常用的4种属性）
hushuo
发布于 2021-4-6 18:16
浏览
0收藏
首先继续上篇讲解了字体类样式的2个基础属性：字体属性font-family，字号属性font-size；
这篇继续介绍：字体类样式（常用的4种属性）
一、粗细 font-weight
示例：
<!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>
二、字体风格 font-style
示例：
<!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>
三、行高 line-height
（实际应用中通过设计图获取，量取数值时需要使用一些辅助工具，比如：FireWorks）
用Fireworks量取行高的步骤：
1.软件初始设置：选中文字工具，在属性栏中将平滑消除锯齿， 更改为不消除锯齿，方便文字的像素点清晰显示。
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";
版权声明：本文为博主「倏存」的原创文章
赞
收藏
回复
相关推荐
