We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Learn more about funding links in repositories.
Report abuse
There was an error while loading. Please reload this page.
第274天 css如何消除字体的锯齿?
我也要出题
-webkit-font-smoothing:antialiased;
一直抄的,但莫得测试设备让我有机会研究。
要消除字体的锯齿,可以使用以下两种方法:
使用抗锯齿属性 可以通过 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; / 其他浏览器 */ }
Activity
forever-z-133 commentedon Jan 15, 2020
一直抄的,但莫得测试设备让我有机会研究。
Wyt-GitHub8000 commentedon Mar 30, 2023
要消除字体的锯齿,可以使用以下两种方法:
使用抗锯齿属性
可以通过 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; / 其他浏览器 */
}