css不同厚度用不同字体

在CSS设计中，字体的选择很重要，但是同样重要的是字体的粗细。不同的字体粗细可以给网页带来不同的视觉效果和体验。在这篇文章中，我们将探讨如何在不同的字体粗细下使用不同的字体。

首先，我们需要了解一些基本概念。字体的粗细可以通过CSS的“font-weight”属性来控制。一般而言，这个属性的值有以下几种。

font-weight: normal;  //正常字体，即400字重
font-weight: bold;  //粗体，即700字重
font-weight: 100;  //超细字体
font-weight: 200;  //细字体
font-weight: 300;  //轻字体
font-weight: 400;  //正常字体
font-weight: 500;  //半粗字体
font-weight: 600;  //粗体
font-weight: 700;  //黑体，即特粗字体
font-weight: 800;  //极粗字体
font-weight: 900;  //超粗字体 

在选择字体时，我们需要注意字体的可读性和美观性。一般而言，正文中的字体粗细应该在400到600之间，标题可以选择更粗的字体。

考虑到中文字体的特点，推荐使用宋体、微软雅黑等字体作为正文字体，使用黑体、华文行楷等字体作为标题字体。不同字体的粗细也会影响到网页的排版效果。当不同粗细的字体出现在同一行中时，应该确保它们的字体大小和行高相同，以确保整个网页的美观性和可读性。

如下代码示例，分别展示了超细、细、正常、半粗和粗体字的效果：

<style>
  p{text-align:center;font-size:18px;line-height:1.5;font-weight:400;font-family:Arial, sans-serif;}
  .font100{font-weight:100;font-family:'Microsoft YaHei',sans-serif;}
  .font200{font-weight:200;font-family:'Microsoft YaHei',sans-serif;}
  .font500{font-weight:500;font-family:'Microsoft YaHei',sans-serif;}
  .font600{font-weight:600;font-family:'Microsoft YaHei',sans-serif;}
  .font700{font-weight:700;font-family:'Microsoft YaHei',sans-serif;}
</style>
<p class="font100">超细字体</p>
<p class="font200">细字体</p>
<p>普通字体</p>
<p class="font500">半粗字体</p>
<p class="font600">粗字体</p> 

在设计网页时，正确选择字体粗细可以给用户带来更好的浏览体验。希望这篇文章能帮助您更好地进行字体选择和排版。