问题标签 [font-rendering]
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.
html - CSS 属性“will-change”改变字体颜色(亚像素字体渲染)
我正在使用 Bootstrap 4。但是当打开下拉组件时,字体颜色略有变化。
在寻找一些可能是问题的颜色定义(没有)之后,我发现了一些奇怪的东西:当我禁用下拉元素的transform
and属性时,字体颜色会以某种方式受到影响。will-change
在此处查看视频:
https ://www.dropbox.com/s/xkhl4m6enwvdzcd/Video%20color%20bug.mov?dl=0
它在 Google Chrome 和 Cinema Display(视频)中最为明显。
似乎亚像素字体渲染也受到了影响:请参见此处的屏幕截图。有趣的是:字体颜色在关闭时渲染得更准确。
在 Safari 中也会出现字体渲染问题...
知道这里发生了什么吗?
(我可以发布一个代码笔,或者在视频中查看它的 ID。)
opengl - 在 OpenGL 中使用 RGB 纹理作为 alpha 值/子像素字体渲染
目前我在亚像素模式下使用 FreeType,并将每个像素的最大颜色作为 alpha 值,使用以下片段着色器:
这适用于深色背景,但在较浅的背景上会显示边框像素(例如,当文本像素为 (1,0,0) 时)。为了使它适用于更亮的背景,我需要传递背景颜色并自己进行混合,一旦我移动到更复杂的背景,它就会开始崩溃。
有没有办法将 FreeType 中的 RGB 值用作纯色的 alpha 值(传递给着色器)?这个公式基本上,其中 b = 背景像素,t = 当前文本像素,c = 静态颜色:
我认为首先绘制其他所有内容并将该帧缓冲区传递给字体着色器会起作用,但这似乎有点矫枉过正。有没有办法在 OpenGL 混合阶段做到这一点?我尝试使用 glBlendFunc 等,但没有得到任何结果。
java - JavaFX 字体渲染中的错误字符间距(紧缩)(在 Linux 中)
我已经开始在 JavaFX 中开发一个应用程序并且我遇到了一个问题,我几乎找不到关于以下方面的有用信息:Linux 中字符之间的间距非常不均匀。我不是在谈论不同字符的宽度,而是在谈论字符之间的空格。
它在普通文本中可见,但下面的示例比普通文本更能说明效果。看看第一行。前两个字符之间的间距小于第二个和第三个字符之间的间距。这也发生在第六个和第七个字符以及其他几个字符之间:
Swing 没有这个问题,JavaFX 在 Windows 中没有这个问题,或者它在那个操作系统上几乎不可见。它似乎也不是 Mac 上的主要问题。为了比较,下面是 2014 年年中 Mac Retina MacBook Pro 上的示例输出,运行 OS X 10.12.6 和 Java 9.0.4:
有谁知道这是否是 JavaFX 字体渲染引擎中的错误?如果是这样,是否有解决方法?
我真的开始怀疑是否应该更改框架,因为在我看来,这种糟糕的字体渲染是不可接受的。
关于这个问题还有另一个问题,但尚未得到解答: 为什么 JavaFX 在使用 Text 组件时会在字母之间添加额外的间距,我该如何解决?
我已经能够在运行 Manjaro 的两台不同的 Linux 机器和运行 Debian 的虚拟机上使用以下代码重现此问题:
pdf - Coldfusion 不在 PDF 中显示已安装的字体
我在 Coldfusion 2016(64 位)的字体管理中安装了 Helvetica Neue Thin。安装没有任何错误,但字体不显示在 PDF 中。我有 Barcode 字体,它已安装并完美运行。问题是:需要字体特殊许可证才能在网页上显示它?如果是,条形码字体如何完美工作(无需任何特殊许可)。
css - 指定“等宽”通用字体时的不同字体边距
在 OSX 上的 Chrome 中用中文指定“等宽”时,它会正确渲染 PingFang SC,但是渲染的字体会比直接使用“PingFang SC”渲染完全相同的字体高 2 个像素。演示:
https://jsbin.com/mahuqub/edit?html,输出
这不是行高问题,因为我可以看到将行高设置为完全相同的结果。我还注意到某些问题,例如特殊字符/空格在未正确设置“lang”属性时占用不同的空间,但是通过设置“lang”而不使用特殊字符来控制此处。另请注意,Chrome 声称正在渲染 PingFang SC。我还确保我的系统上只有默认的“PingFang SC”字体,不存在其他用户安装的字体。我也没有注意到其他脚本中等宽泛型的这种行为(hrkt/hang,当然还有拉丁语等)。
我的问题是:
1)为什么“等宽”会以不同的方式呈现完全相同的字体?
2)有没有办法检测到这个?
javascript - Roboto 字体仅在 Windows Edge 中的一个 DOM 元素和 Win7 中的 IE10 上替换了默认的 Time News Roman
我使用 html、css 和 GSAP tweenies 制作了一个 svg 动画横幅。一切都很好,直到计数器开始使用简单的 innerHTML 属性进行计数。横幅中的所有文本都应该是 Roboto,除了这个元素被默认的 Times New Roman 替换。这仅在 Windows 浏览器中发生:Edge 和 IE10,所有其他供应商的浏览器都按应有的方式呈现它。
您可以在最后一张图片中看到 70% 的人非常出色
CSS部分:
html部分:
js部分:
编辑:指定此问题仅在 Windows 浏览器中发生(最初的问题令人困惑)