特定字体仅在 Firefox 中有不正确的下划线——错误在哪里,如何解决?
Specific font has incorrect underline in Firefox only — where is the error, and how to fix it?
问题
特定字体 (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)
中截取的。 Firefox 版本为 69.0.2 (64-bit)
.
问题
这是什么原因?在我看来,它可能是以下任何一种,也可能不止一种:
- 我的例子中的问题
- 配置错误/"wrong" 字体文件
- Firefox 中的错误
如果问题不在我的示例中,我想将此行为报告给适当的一方。我不太了解字体或浏览器渲染,所以我很难确定这里发生了什么。
如果错误不在我的示例中,是否有解决方法允许我继续使用此特定字体并使其在 Firefox 中正确显示?
截至 Firefox 70, the issue is fixed, maybe due to compositor improvements on macOS,或者可能是因为 "Readability is now greatly improved on under- or overlined texts, including links. The lines will now be interrupted instead of crossing over a glyph."
谢谢Mr Lister for 。
问题
特定字体 (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)
中截取的。 Firefox 版本为 69.0.2 (64-bit)
.
问题
这是什么原因?在我看来,它可能是以下任何一种,也可能不止一种:
- 我的例子中的问题
- 配置错误/"wrong" 字体文件
- Firefox 中的错误
如果问题不在我的示例中,我想将此行为报告给适当的一方。我不太了解字体或浏览器渲染,所以我很难确定这里发生了什么。
如果错误不在我的示例中,是否有解决方法允许我继续使用此特定字体并使其在 Firefox 中正确显示?
截至 Firefox 70, the issue is fixed, maybe due to compositor improvements on macOS,或者可能是因为 "Readability is now greatly improved on under- or overlined texts, including links. The lines will now be interrupted instead of crossing over a glyph."
谢谢Mr Lister for