整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
天说了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
ont 属性可以用来作为 font-style, font-variant, font-weight, font-size, line-height 和 font-family 属性的简写，或将元素的字体设置为系统字体。
font-family写法示例：
<style>
p{
font-family: "幼圆";
}
</style>
</head>
<body>
<p>19级启嘉班</p>
</body>效果：
有的网站的主体部分是离不开文字说明的，文字说明可以指引用户找到想要的信息，如果网站中的文字排版混乱，最终就会使网站失去更多的效果。在今天内容中，小编要与大家分享下文章排版的一些知识。
首先是文字大小的对比，大字体的网站可以给人以强有人的视觉感觉，但缺乏纤细和精致感。而小字体的网站精巧柔和，但力量感不足，如果大小文宁配合使用，可以互相缓解其缺点，并产生生动活泼的对比关系。
其次是文字粗细的对比，字体粗象征强壮、刚劲、沉默，字体细则感觉柔弱、纤细、活泼。在同一厅文字中使用粗细对比效果最为强烈。一般来说，粗字体用于表现丰要的、核心的内容。粗字少细宁多易取得均衡，给人以明快新颖的感觉。
最后是文字的明暗对比，明与暗的文宁造型出现在同一界面中，可以使主题更加醒目和突出，使人感到有距离远近、时间羌别的空间效果。叫暗对比的友现首先要安排好明暗面积在界面中的比例关系，文字主题与背景及其他宁群间应保持得当的比例，避免干篇一律的单调形式，使界面显出活跃、生动的气氛。
不管我们网站属于什么行业的，只要在最初根据网站设计样式来确定字体的样式，合理搭配其它的元素后，就会给网站带来一个视觉的体验，效果也会提升不少。
文章出自廊坊网站建设公司，分享转载地址：http://www.e-wkj.cn/xw/2138.html
*请认真填写需求信息，我们会在24小时内与您取得联系。
