Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[css] 第31天 让网页的字体变得清晰,变细用CSS怎么做? #111

Open
haizhilin2013 opened this issue May 16, 2019 · 7 comments
Labels
css css

Comments

@haizhilin2013
Copy link
Collaborator

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

@haizhilin2013 haizhilin2013 added the css css label May 16, 2019
@xiangshuo1992
Copy link
Contributor

xiangshuo1992 commented May 17, 2019

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

@tzjoke
Copy link

tzjoke commented May 28, 2019

全家桶:

-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
Copy link

Konata9 commented Aug 25, 2019

让文字变细有两个要素:

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

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

参考文章:
CSS 让文字变细

@blueRoach
Copy link

font-weight 和 font-family

@MrZ2019
Copy link

MrZ2019 commented Oct 9, 2020

让文字变细有两个要素:

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

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

@zxcdsaqwe123
Copy link

改变字体?

@Iambecauseyouare
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
css css
Projects
None yet
Development

No branches or pull requests

8 participants