Fe-interview: [css] 第31天 让网页的字体变得清晰，变细用CSS怎么做？

[haizhilin2013]

第31天 让网页的字体变得清晰，变细用CSS怎么做？

[xiangshuo1992]

第一个反应是想到 font-weight: lighter; ，简单测试了下，是有效的，不过没有多平台测试。
第二个想到的是 font-family 设置偏细的字体
第三个是在重置样式里见过，针对MAC，IOS平台，有个 -webkit-webkit-font-smoothing: antialiased 样式。
至于这个需求本身，为什么要让字体变细呢？视觉效果实现希望整站变细？
变清晰不是应该通过色值的对比度来实现吗

[tzjoke]

全家桶：

-webkit-font-smoothing: antialiased
-moz-osx-font-smoothing: grayscale
text-shadow: 1px 1px 1px 1px rgba(0,0,0,0.005)
text-rendering: optimizeLegibility

[Konata9]

让文字变细有两个要素：

1. font-weight + font-family
   font-weight 来控制粗细还是需要看对应的字体有没有对应的变种字体。因此这就和 font-family 相关。

2. -webkit-font-smoothing
   这个属性是 Chrome 的抗锯齿属性。加上后会显得细一些，但是只针对 webkit 内核的浏览器才有效。

参考文章：
CSS 让文字变细

[blueRoach]

font-weight 和 font-family

[MrZ2019]

让文字变细有两个要素：

font-weight + font-family
font-weight 来控制粗细还是需要看对应的字体有没有对应的变种字体。因此这就和 font-family 相关。

-webkit-font-smoothing
这个属性是 Chrome 的抗锯齿属性。加上后会显得细一些，但是只针对 webkit 内核的浏览器才有效。