haizlin/fe-interview

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

Opened this issue · 7 comments

haizhilin2013 commented

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

xiangshuo1992 commented

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

  • 👍1
  • 👎3
tzjoke commented

全家桶：

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

让文字变细有两个要素：

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

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

参考文章：
CSS 让文字变细

  • 👍1
blueRoach commented

font-weight 和 font-family

MrZ2019 commented

让文字变细有两个要素：

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

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

zxcdsaqwe123 commented

改变字体？

Iambecauseyouare commented

font-weight和font-family
-webkit-font-smoothing在window下没有用