网站首页 > 技术文章 正文
昨天说了CSS字体属性的大小,font-family, 今天我们来一起学习下字体属性的字体粗细 font-weight
还是使用昨天的那首诗,让诗句中的最后一句显示粗体,看下效果:
可以看到最后一句显示粗体了,我们来查看下对应的代码:
<!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>CSS字体属性之字体粗细和样式</title>
<style>
.bold {
font-weight:bold;
}
</style>
</head>
<body>
<h2>明月几时有</h2>
<p>明月几时有,把酒问青天</p>
<p>不知天上宫阙,今夕是何年</p>
<p>我欲乘风归去,又恐琼楼玉宇</p>
<p>高处不胜寒,起舞弄清影,何似在人间。</p>
<p>人有悲欢离合,月有阴晴圆缺,此事古难全</p>
<p class="bold">但愿人长久,千里共婵娟。</p>
</body>
</html>
字体粗细中的参数包括: normal | bold | bolder | lighter | number(自定义)
我们来试试lighter和number自定义吧
可以看到红框的字体都已经设置好了,对应的代码为:
<!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>CSS字体属性之字体粗细和样式</title>
<style>
.bold {
font-weight:bold;
}
.lighter {
font-weight:lighter;
}
.number {
font-weight: 900;
}
</style>
</head>
<body>
<h2>明月几时有</h2>
<p class="lighter">明月几时有,把酒问青天</p>
<p>不知天上宫阙,今夕是何年</p>
<p class="number">我欲乘风归去,又恐琼楼玉宇</p>
<p>高处不胜寒,起舞弄清影,何似在人间。</p>
<p>人有悲欢离合,月有阴晴圆缺,此事古难全</p>
<p class="bold">但愿人长久,千里共婵娟。</p>
</body>
</html>
这里需要记住的一点,number自定义数字后不需要加上px
那么是否可以对标题的字体进行粗细设置呢?
答案是可以的,一起来看下
可以看到标题中的字体变为正常的了,对应的代码如下:
<!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>CSS字体属性之字体粗细和样式</title>
<style>
.bold {
font-weight:bold;
}
.lighter {
font-weight:lighter;
}
.number {
font-weight: 900;
}
h2 {
font-weight: normal;
}
</style>
</head>
<body>
<h2>明月几时有</h2>
<p class="lighter">明月几时有,把酒问青天</p>
<p>不知天上宫阙,今夕是何年</p>
<p class="number">我欲乘风归去,又恐琼楼玉宇</p>
<p>高处不胜寒,起舞弄清影,何似在人间。</p>
<p>人有悲欢离合,月有阴晴圆缺,此事古难全</p>
<p class="bold">但愿人长久,千里共婵娟。</p>
</body>
</html>
加上了对h2的字体设置
好的,今天就是我们对字体粗细的学习,大家加油,十一马上就要结束了,88
- 上一篇: 10 个前端开发人员经常使用的 CSS 技巧
- 下一篇: 一个图片放大效果css样式表
猜你喜欢
- 2024-11-25 [前端开发]网页设计|如何实现网页变灰效果_网站蒙灰CSS样式总汇
- 2024-11-25 Three.js开发日记3:如何在three.js模型中插入html内容?
- 2024-11-25 「测试开发全栈-HTML」(20)css的引入方式-外部样式表和总结
- 2024-11-25 web开发源代码案例3-css样式
- 2024-11-25 「测试开发全栈-HTML」(10)css字体属性之字体样式和复合属性
- 2024-11-25 「测试开发全栈-HTML」(15)css字体的文本缩进
- 2024-11-25 CSS中的z-index属性如何使用
- 2024-11-25 交互设计进阶:如何通过CSS制作引人注目的按钮
- 2024-11-25 java将html转为pdf
- 2024-11-25 「测试开发全栈-HTML」(11)css字体复合属性和小结
- 标签列表
-
- content-disposition (47)
- nth-child (56)
- math.pow (44)
- 原型和原型链 (63)
- canvas mdn (36)
- css @media (49)
- promise mdn (39)
- readasdataurl (52)
- if-modified-since (49)
- css ::after (50)
- border-image-slice (40)
- flex mdn (37)
- .join (41)
- function.apply (60)
- input type number (64)
- weakmap (62)
- js arguments (45)
- js delete方法 (61)
- blob type (44)
- math.max.apply (51)
- js (44)
- firefox 3 (47)
- cssbox-sizing (52)
- js删除 (49)
- js for continue (56)
- 最新留言
-