编程技术文章分享与教程

网站首页 > 技术文章 正文

「测试开发全栈-HTML」(9)css字体属性之字体粗细和样式

hmc789 2024-11-25 12:50:21 技术文章 2 ℃

昨天说了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

Tags:

标签列表
最新留言