Skip to content

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

Open
@haizhilin2013

Description

@haizhilin2013
Collaborator

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

Activity

xiangshuo1992

xiangshuo1992 commented on May 17, 2019

@xiangshuo1992
Contributor

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

tzjoke

tzjoke commented on May 28, 2019

@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

Konata9 commented on Aug 25, 2019

@Konata9

让文字变细有两个要素:

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

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

参考文章:
CSS 让文字变细

blueRoach

blueRoach commented on Jun 30, 2020

@blueRoach

font-weight 和 font-family

smile-2008

smile-2008 commented on Oct 9, 2020

@smile-2008

让文字变细有两个要素:

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

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

zxcdsaqwe123

zxcdsaqwe123 commented on Oct 20, 2021

@zxcdsaqwe123

改变字体?

Iambecauseyouare

Iambecauseyouare commented on Mar 16, 2023

@Iambecauseyouare

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @smile-2008@haizhilin2013@Konata9@xiangshuo1992@blueRoach

        Issue actions

          [css] 第31天 让网页的字体变得清晰,变细用CSS怎么做? · Issue #111 · haizlin/fe-interview