Question

我在项目中使用字体Cardiff并尝试将样式text-decoration:underline应用于它。

这在Chrome（版本35.0.1916.114）中运行良好，但Firefox（版本.29.0.1）下划线正在穿过文本而不是出现在它下面。我认为这与卡迪夫字体有关，因为当我尝试使用“网络安全”时。字体下划线正确显示。

这是加的夫字体的显示方式

cardiff font

如果我将字体更改为 Helvetica ，就会显示

helvetica font

我已经尝试了一些事情：

将字体包装在span标记中，然后将其设置为块并将其设置为高度
我还尝试了另一个question

更新...

使用@touko提供的修补程序我已经制定了一个解决方案，这个解决方案并不是我想要解决的问题，但它确实有效。

我已经为Firefox使用了边框，而对其他浏览器使用了常规text-decoration。

h2 {
    text-decoration: underline;
}

Firefox特定的CSS样式，如solution ...

所述

@-moz-document url-prefix() {
    h2 {
        text-decoration: none;
        display: inline;
        border-bottom: 1px solid #4c2f04;
        padding-bottom: 6px;
    }
}

我希望有人能找到比这更好的解决方案，因为如果有的话，这更像是一种躲闪的工作。

Answer 1

看起来像是字体问题，您可以尝试通过Font Squirrel Web Font Generator运行它，看看是否能解决问题。

Answer 2

yourtxt-wrap{text-decoration:overline}
yourtxt-wrap{text-decoration:line-through}
yourtxt-wrap{text-decoration:underline}

Answer 3

您可以使用border-bottom作为下划线，并使用填充设置下面的空格。

Answer 4

不要使用vertical-align: middle 类似的问题在这里：Link underline appearing above text in Firefox? 但看起来你的问题是字体本身。我不建议在文本下做像边框一样的黑客攻击。搜索其他字体。

body {
  font-family: Cardiff;
  font-size: 24px;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link href="//db.onlinewebfonts.com/c/5762715ddcc2993805a83fcd2f569ea8?family=Cardiff" rel="stylesheet" type="text/css"/>
</head>
<body>
  <a href="#">Demo text</a>
</body>
</html>

下划线文本修饰正在穿过Firefox中使用的导入字体

更新...

4 个答案: