html字体粗细代码（html设置字体粗细）

html字体粗细代码，原文标题：「测试开发全栈-HTML」(9)css字体属性之字体粗细和样式。

昨天说了CSS字体属性的大小，font-family, 今天我们来一起学习下字体属性的字体粗细 font-weight

还是使用昨天的那首诗，让诗句中的最后一句显示粗体，看下效果:

可以看到最后一句显示粗体了，我们来查看下对应的代码:

<!DOCTYPE html>

<head>

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

<head>

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

<head>

<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

本文《html字体粗细代码（html设置字体粗细）》由网赚联盟（ wangzhuan.org.cn ）整理或原创，感谢您的阅读。

随机文章

SEO小小课堂网
站长导航
友情链接交换
关键词排名优化
网站内容优化
GEO培训
SEO小小课堂网
SEO教程

百度搜索“网赚联盟”即可找到本站，微信搜索“小小课堂网”关注小小课堂网公众号。网赚联盟（ wangzhuan.org.cn ）欢迎用户投稿，发布者：蛋蛋杂谈，文章版权归作者所有，投稿文章不代表网赚联盟立场，中二少年发布为网赚联盟原创文章，转载请注明出处：https://wangzhuan.org.cn/568993.html

html字体粗细代码（html设置字体粗细）

随机文章

发表评论