Skip to content

[css] 第274天 css如何消除字体的锯齿? #1777

Open
@haizhilin2013

Description

@haizhilin2013

第274天 css如何消除字体的锯齿?

我也要出题

Activity

forever-z-133

forever-z-133 commented on Jan 15, 2020

@forever-z-133
-webkit-font-smoothing:antialiased;

一直抄的,但莫得测试设备让我有机会研究。

Wyt-GitHub8000

Wyt-GitHub8000 commented on Mar 30, 2023

@Wyt-GitHub8000

要消除字体的锯齿,可以使用以下两种方法:

使用抗锯齿属性
可以通过 text-rendering 属性来消除字体的锯齿。该属性有以下几个值:

auto: 浏览器默认值,使用系统默认的字体渲染方式,可能会出现锯齿。
optimizeSpeed: 强制浏览器使用速度优先的渲染方式,可能会出现锯齿。
optimizeLegibility: 强制浏览器使用质量优先的渲染方式,能够有效消除锯齿,但是会牺牲一些性能。
geometricPrecision: 强制浏览器使用最高质量的渲染方式,能够完全消除锯齿,但是会极大地牺牲性能。
例如,以下代码可以使用最高质量的渲染方式消除字体的锯齿:
body {
text-rendering: geometricPrecision;
}

使用字体平滑
还可以通过 font-smooth 属性来消除字体的锯齿。该属性有以下几个值:

auto: 浏览器默认值,可能会出现锯齿。
never: 关闭字体平滑,会出现锯齿。
always: 开启字体平滑,能够消除锯齿。
例如,以下代码可以开启字体平滑消除字体的锯齿:
body {
-webkit-font-smoothing: antialiased; /* Webkit 内核浏览器 /
-moz-osx-font-smoothing: grayscale; /
Firefox 和 Safari /
font-smooth: always; /
其他浏览器 */
}

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

        @haizhilin2013@forever-z-133@Wyt-GitHub8000

        Issue actions

          [css] 第274天 css如何消除字体的锯齿? · Issue #1777 · haizlin/fe-interview