【问题标题】:Text advancing by a few pixels per character每个字符推进几个像素的文本
【发布时间】:2019-11-29 11:33:44
【问题描述】:

我做了一个字体。某些字符旨在组合(一个字形叠加在另一个字形上,类似于 प + े = पे)。

当我将字体导入文档编辑器(例如 Libre Office)时,这可以正常工作。当我在 Google Chrome 的文本区域中键入脚本时,它也可以正常工作。

但是,当在 Firefox 的文本区域中使用该字体时,即使在 TTF 字体文件数据中水平前进设置为 0,每个字符之后也会有一个微小的增量。

这似乎是 Firefox 内置的东西,但它使组合看起来有点不对劲,而且,如果我想将多个字符叠加在一起,看起来会很糟糕。我想我在某处读到 Firefox 知道会为某些字体关闭此功能,但我不知道该怎么做。或者也许在 textarea 的 CSS 样式中有一些东西?我很茫然。

【问题讨论】:

    标签: css firefox fonts textarea mozilla


    【解决方案1】:

    CSS letter-spacing: 0; 是否使它成为应有的样子,或者与消极或积极的东西混在一起会让你有所收获?

    或者也可以查看属性 font-kerning。

    【讨论】:

    • 啊哈!使用“字母间距:-1px”有效。不是最好的解决方案,因为它是特定于浏览器和特定字体的,并且没有多大意义,但是谢谢,它可以正常工作!
    • 我想知道是否有一些浮点比较或舍入错误或导致它前进一个像素的东西
    • 没问题。我对字体知之甚少,但我想根据默认渲染大小和缩放比例,一个渲染将决定 x 值处的所有像素都得到一个别名,而另一个将决定一个别名正确。只是提个醒;检查如何使用 px 值来缩放字体大小。它可能会崩溃,您实际上可能需要使用小数 em 值。我会敦促您尝试找到将像素捕捉到您需要的位置的范围的确切中心的 em 值,因为这可能最有可能支持多浏览器。祝你好运!
    • 好点!看来“-.05em”是正确的修正量(仅适用于Firefox,使用“@-moz-document url-prefix() {...}”)
    • 随着更密集的测试,它的范围似乎从 -.03em 到 -.05em,具体取决于缩放系数。我选择 -.04em,因为它足够接近,在任何实际情况下都不会被注意到。
    猜你喜欢
    • 1970-01-01
    • 2023-03-30
    • 1970-01-01
    • 2014-01-04
    • 2023-03-03
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多