[分享]css3字体少于12px

随着网页设计的发展，越来越多的网站开始使用 CSS3 来实现更加丰富和独特的设计效果。而其中一个重要的方面就是字体，而且在 CSS3 中，我们可以实现小于 12px 的字体。在很多情况下，我们需要在网...

随着网页设计的发展，越来越多的网站开始使用 CSS3 来实现更加丰富和独特的设计效果。而其中一个重要的方面就是字体，而且在 CSS3 中，我们可以实现小于 12px 的字体。

在很多情况下，我们需要在网站的标题或者其他重要的文字上使用较小的字体来达到更好的视觉效果和排版。然而在 CSS2 中，字体大小最小只能调整到 12px，很多时候这个限制会给网站设计和排版带来一定的局限性。

但是在 CSS3 中，我们可以使用 font-size 的 rem 或者 em 单位来设置字体的大小，这样就可以实现小于 12px 的字体了。同时，在一些现代浏览器中支持新的单位 vw 和 vh，并且可以用来设置 font-size。

p {
  font-size: 0.8rem;
} 

在上面的示例代码中，我们可以看到通过使用 rem 单位来设置字体大小为 0.8 倍的根字体大小。这个设置可以实现比 12px 更小的字体，而且可以适应不同分辨率和屏幕大小。

当然，在使用小于 12px 的字体时，还需注意一些细节。例如，在使用 em 单位时，需要保证字体的父元素的字体大小不能为 0px，否则子元素的字体大小为 0px。

body {
  font-size: 16px;
}

p {
  font-size: 0.8em;
} 

在上面的代码中，我们可以看到设置了父元素的字体大小为 16px，子元素使用 0.8em 单位来设置字体大小，实际上就是小于 12px 的字体。这个设置是有效的，因为我们保证了父元素的字体大小不为 0px。

总之，在使用小于 12px 的字体时，需要仔细考虑一些细节。但是在 CSS3 中，我们的设计师有更多的选择，可以实现更加丰富和独特的设计效果。