特定字体仅在 Firefox 中具有不正确的下划线 - 错误在哪里,如何解决?

Posted

技术标签:

【中文标题】特定字体仅在 Firefox 中具有不正确的下划线 - 错误在哪里,如何解决?【英文标题】:Specific font has incorrect underline in Firefox only — where is the error, and how to fix it? 【发布时间】:2020-02-09 10:35:53 【问题描述】:

问题

特定字体 (Concert One from Google Fonts) 仅在 Firefox 中表现不佳。下划线时,由于太高,下划线显示为删除线。


示例

这是我最小的、可重现的示例:

<!DOCTYPE html>
<html lang="en-us">
    <head>
        <link href="https://fonts.googleapis.com/css?family=Concert+One&display=swap" rel="stylesheet">
    </head>

    <body>
        <u style="font-family: 'Concert One'">Underline too high</u>
    </body>
</html>

这是 Safari 中的外观(与 Chrome 中相同),这是预期的外观:

这就是它在 Firefox 中的显示方式:

两张截图都是在 macOS 版本 10.15 (19A583) 中拍摄的。火狐版本是69.0.2 (64-bit)


问题

    是什么原因?在我看来,它可能是以下任何一种,可能不止一种:

    我的例子中的问题 配置错误/“错误”的字体文件 Firefox 中的错误

    如果问题不在我的示例中,我想将此行为报告给相关方。我对字体或浏览器渲染不太了解,所以我很难确定这里发生了什么。

    如果问题不在我的示例中,是否有解决方法可以让我继续使用此特定字体并使其在 Firefox 中正常显示?

【问题讨论】:

在我的 Win10、FF 67 中工作正常。也适用于上面的代码 sn-p。查看u 元素是否存在影响它的css 样式。 我可以在 FF 60ESR 中看到问题,但在 v71(夜间)中看不到,所以显然这是他们用较新版本修复的问题。 @wazz 和使用 CSS 在显示上没有区别。 在浏览器中也是用 CSS 实现的。 仅在 Firefox for android 中存在与特定字体相同的问题。尝试了最新的“夜间”APK (68.3a1),但这确实解决了问题。有谁知道修复程序是否已移植到 Android 源? @Jake 对我来说,Firefox 70 修复了 Firefox 69 之前存在的问题。假设桌面版本号对应于 Android 版本号,一旦版本 70 进入 Android,您应该有一个修复。我找不到比这更好的解决方案了。 【参考方案1】:

截至Firefox 70,问题已得到解决,可能是由于compositor improvements on macOS,也可能是因为“现在,下划线或上划线文本(包括链接)的可读性得到了极大提高。这些行现在将被中断而不是交叉一个字形。”

感谢Mr Lister noticing that this would be fixed in future Firefox versions。

【讨论】:

以上是关于特定字体仅在 Firefox 中具有不正确的下划线 - 错误在哪里,如何解决?的主要内容,如果未能解决你的问题,请参考以下文章

iframe 高度仅在 Firefox 中无法正确显示

仅在 Internet Explorer 中使用不同的字体

图像仅在 Firefox 中具有奇怪的色调

Firefox 开发人员忽略字体粗细

仅在最大日期而不是在组的其他条目中显示具有特定值的组

在使用某些字体系列时,firefox上的输入类型编号完全不可见占位符