问题标签 [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 投票
0 回答
377 浏览

java - JavaFX:关闭字体平滑

(有几个类似的问题,但没有答案)

我开始尝试使用 JavaFX (JDK8),我注意到的第一件事是可怕的字体平滑。我正在使用 Windows 8.1,禁用字体平滑/ClearType OS-wide 是我做的第一件事。大多数应用程序都尊重这一点(两个值得注意的例外是 IE 和 Metro UI 的东西),但 JavaFX 似乎在强迫它。

这是说明它的屏幕截图 - Eclipse IDE 中的代码片段和生成的 JavaFX 窗口(代码在 Scala 中,但非常易读)。它们都使用相同的字体,因此差异很明显。

问题截图

如您所见,我尝试设置

但它们似乎没有任何影响。

关于这个问题的任何提示或见解?

0 投票
0 回答
28 浏览

javascript - 仅在带有动画的 Firefox 上进行文本模糊

试图为我的观点获得一个干净的文本。此代码在 chrome/IE 上显示干净的文本,但在 Firefox 上不显示,由于某些原因,它显示了一个模糊的文本。

这是我的问题的重现:https ://jsfiddle.net/z7egrnod/

有没有人有解决方案来解决这个问题?我只是不明白怎么可能有一个模糊的文字。

chrome 上的图片示例:

镀铬

Firefox 上的图片示例:

在火狐上

0 投票
0 回答
156 浏览

visual-studio-mac - Visual Studio for Mac 2019 中的字体平滑

我昨天将 Visual Studio for Mac 2017 升级到 2019,并立即注意到在文本编辑器中关闭了亚像素渲染!看起来很可怕。

我正在运行 OS X Mojave,在升级它之后,我使用我在网上找到的指南为整个系统再次明确地打开了亚像素渲染。因此,除了 VS for Mac 2019 文本编辑器窗口本身之外的所有内容都在使用亚像素渲染。

发生了什么事,我该如何重新打开它?我已经在网上搜索了一个小时,但没有发现任何线索或黑客攻击。

0 投票
0 回答
556 浏览

css - 如何使画布中的字体平滑,就像在 CSS 中使用 -webkit-font-smoothing: antialiased 一样?

我正在构建一个横幅生成工具来自动化我们的工作流程。但是我在渲染字体时发现了一个问题(我稍后会添加一些截图)。

如果我们使用完全相同的字体和字体粗细,并且我使用的是 mac,那么它就是一个视网膜屏幕:

  1. 如果我查看设计应用程序中的文本(无论它是用 Photoshop、Sketch 还是基于 webgl 的设计工具 Figma 制作的),它看起来非常清晰(平滑),这是理想的。

  2. 如果我使用 html/css 来渲染字体,那么字体看起来比在设计应用程序中要厚得多。它使我的文本看起来更忙,因为汉字本身在视觉上比英文字符更复杂。但是如果我使用-webkit-font-smoothing:antialiased,那么文本的渲染几乎和设计应用程序一样,也是相当不错的

  3. 但是,我的工具必须使用canvas,因为html / css对设计应用程序的某些效果的支持很差,然后我发现,canvas中的文本渲染似乎也很厚。而且,我还没有找到像 -webkit-font-smoothing: antialiased 这样的方法来完全修复它。我能做的唯一改进是将画布缩放到 3 倍甚至 4 倍。我确实发现,当画布缩放到 4 倍大时,字体会变细,但距离 -webkit-font-smoothing: antialiased 的效果仍然很远

有什么方法可以使画布文本渲染结果与 -webkit-font-smoothing: antialiased in html/css 相同?

0 投票
2 回答
126 浏览

html - 如何获得别名(复古风格)的 HTML 文本效果

我正在尝试使用 HTML 和 CSS 文本实现锯齿状文本效果。我知道 webkit-font-smoothing 和 font-smooth 属性,但即使设置为“none”和“never”,文本仍然比我想要的更平滑。

是否有其他 css 属性,或者我可以使用其他方法来强制文本更加锯齿/别名?唯一需要注意的是它必须是实际的 HTML 文本,而不是图像。

在此处输入图像描述

0 投票
0 回答
23 浏览

fonts - 如果我为我们的 Web 应用禁用 webkit-font-smoothing,它对 Windows 用户来说会看起来很糟糕吗?

我是一名用户体验设计师。

我的公司www.SAP.com使用 BentonSans 作为其主要字体。我们的开发人员正在开发一个网络应用程序,与主站点相比,字体看起来太薄了。但是,我进入代码并关闭了webkit-font-smoothing: antialiased; 并且字体似乎与 SAP.com 匹配。

但是,在我要求我们的开发人员进行更改并将其删除之前,我要格外小心。我读过关闭它可能会导致它在 Windows 设备上看起来很糟糕。

我的问题:

如果我把它关掉,会不会有什么不良影响(尤其是非mac用户,我无法在Windows上测试)?乍一看,它看起来只会让我们的 BentonSans 与我们主站点的 BentonSans 字体相匹配,但我想对此进行一些确认。

0 投票
0 回答
31 浏览

google-chrome - 仅在 Chrome 中为开发人员打开/关闭字体平滑?

我一直在寻找高低,但无济于事。当系统(Win10)中的Cleartype被禁用时,是否有任何方法可以在 Chrome 中打开/关闭字体平滑以用于开发目的?(尝试了一些插件,但它不能覆盖系统设置)。