问题标签 [font-smoothing]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
6 回答
17671 浏览

css - 字体平滑技术?文本阴影在 Chrome 14.0.833.0 或更高版本中呈现不同

编辑:

我们现在在 Chrome 19 中,但这仍然没有修复。澄清一下:这发生在 Windows 上的 Chrome 中,而不是 Linux 或 Mac。我认为这与 Cleartype 有关。谷歌,请解决这个问题。

我一直在使用 CSS3text-shadow在其他浏览器上模拟 IE9 的字体平滑。基本上我只是将容器文本的文本阴影设置为容器的背景。text-shadow您可以通过在低于 Chrome 14.0.833 的任何内容中设置较大的字体元素来查看该行为。文字看起来很流畅。删除文本阴影,字体看起来参差不齐。但是,在 Chrome 14.0.833 中(更新:似乎它在 14.0.834 中也“损坏”了)这不再有效。text-shadow 属性仍然有效,但不像以前那样。您可以在此处查看行为(只需使用差异加载它。Chrome 版本)似乎在较旧的 Chrome 中,文本阴影开始在文本内部一点点然后散开——这也许就是 text-shadow hack 起作用的原因。在较新的 Chrome 中,似乎文本阴影开始于文本之外,这就是它不起作用的原因。看看我在这里的意思。

我的问题基本上是:这是一个错误吗?哪个是预期的行为,如果有的话?我可以使用其他字体平滑解决方法吗?

W3C 的规范似乎没有说明预期的行为是什么,尽管我确实看到也许我应该使用 text-outline (这有点不受支持,这违背了目的)

0 投票
4 回答
5534 浏览

html - 小于 11 像素时字体开始变得模糊

我正在将 Photoshop 图像转换为 HTML,我注意到当我将字体大小设置为 11px 时它会变得模糊,但在 Photoshop 中它看起来仍然很好。

所以在玩了之后我发现如果我将字体类型选项设置为smooth而不是none,Photoshop 也会使字体模糊。

那么,如何使用 CSS 使字体更清晰,以反映 Photoshop 的字体渲染?我使用 Arial 作为我的字体。这是我现在的CSS:

谢谢大家的精彩答案,它对我帮助很大,我希望我能选择超过 1 个答案作为正确答案...

0 投票
4 回答
36733 浏览

html - 是否可以在 CSS 中禁用字体平滑?

我想要一些小字体看起来没有平滑。是否可以使用 HTML/CSS 禁用字体平滑?

0 投票
1 回答
874 浏览

css - Chrome 和 Opera 的抗锯齿

我已经看到围绕互联网解决 Chrome、Opera 和 IE7-8 的 cleartype 问题的理论。IE9 和 Firefox 忽略了用户对 cleartype 的偏好,所以我想知道是否有办法强制网站的字体为每个访问的用户显示为抗锯齿?我尝试了隐藏的文本阴影、-webkit-font-smoothing、一点额外的文本笔划等等,但都无济于事。帮助?

0 投票
3 回答
8978 浏览

xcode - 在 Mountain Lion 的 Xcode 4.4 中禁用抗锯齿字体

一直在这个问题上挣扎变得非常令人沮丧。我不确定它是 Xcode 4.4 还是 Mountain Lion(我同时安装了两者),但我的代码再次在 Xcode 中进行了抗锯齿(字体平滑)。

我以前能够使用以下说明解决此问题,取自此问题,但现在似乎都不起作用:

对于 XCode 3.x,我会执行以下操作:defaults write com.apple.xcode AppleAntiAliasingThreshold 24.

对于 XCode 4,用户默认域更改为 com.apple.dt.Xcode。对于 XCode 4defaults write com.apple.dt.Xcode AppleAntiAliasingThreshold 24应该可以得到你想要的。

如何让 Xcode 恢复可用状态?

0 投票
2 回答
626 浏览

css - 当带有 Flash 的 iframe 在页面上时,Webkit 字体平滑错误。有解决办法吗?

我在 Mac 上使用 Chrome 和 Safari 时遇到了一个令人讨厌的错误。似乎它与字体平滑以及页面是否具有内部带有 Flash 的 iframe 有关。

当我删除 iframe 时,文本看起来像是设置为font-smoothing: subpixel-antialiased(浏览器默认)。但是当 iframe 在页面上(其中运行 Flash)时,文本似乎设置为font-smoothing: antialiased.

有什么解决方法吗?请看下面的截图。

没有 iframe..

用 iframe..

0 投票
8 回答
22121 浏览

intellij-idea - linux中的Intellij IDEA字体平滑

我在带有 KDE 的 Arch Linux 上使用 IntelliJ IDEA。OpenJDK 版本是 1.7.0_40。

整个 IDE 字体(包括代码编辑器)在没有任何抗锯齿和字体平滑的情况下呈现。我在idea.properties文件中设置idea.use.default.antialiasing.in.editortrue,并在_JAVA_OPTIONS变量中添加-Dawt.useSystemAAFontSettings=on -Dswing.aatext=true没有任何效果。

还有什么我可以尝试启用字体平滑?

0 投票
0 回答
1559 浏览

css - CSS 中真正的位图(无抗锯齿/阴影/等)字体

我正在尝试让 firefox 和 chrome 正确渲染位图字体,但无论我做什么,它们总是在某种程度上消除锯齿文本。我正在使用总站,从 TTF 转换为 WOFF 并包含在 CSS 中的 @font-face 中。这是我想要的样子:

(关联)

但这就是它最终的样子(在 Chrome 中,Firefox 大致相同):

(关联)

如果你仔细观察,你可以看到轻微的抗锯齿。这是相关的CSS,所有尝试阻止它都无济于事:

和@font-face:

谢谢!

0 投票
5 回答
45613 浏览

css - Mac/Safari 上的字体粗细变轻

在我上一个网站上,文本在 chrome 和 firefox 上自然完美,无需触及字体平滑或其他任何内容。
但在 Mac / Safari 7 上,文本看起来很好,然后立即变薄(太薄/不好看)。 在此处输入图像描述 在此处输入图像描述

在做了一些研究 [cf http://www.usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/]
和一些测试之后

看起来 Safari 首先显示文本:

然后就在你得到闪烁效果之后,当它把字体变成:

所以在我看来,我别无选择,只能强迫

使我的网站在所有浏览器上保持一致。
我正在使用字体 Avenir Std Roman。

对 Safari 问题的一些解释?有更好的解决方案吗?我的字体可能是问题的一部分吗?

谢谢。

0 投票
1 回答
2789 浏览

css - 在 chrome 的画布中填充文本时出现锯齿状文本

我正在尝试在画布中绘制文本,但绘制的文本有锯齿,尤其是在 chrome 31.0.1650 中。我试过-webkit-font-smoothing:antialiased,text-shadow了,但一切都是徒劳的。

如何解决这个问题?提前致谢。

这是样式代码:

正文中的代码: