Underline text-decoration is crossing through the imported font used in Firefox

问题

I'm using the font Cardiff in a project and trying to apply the style text-decoration:underline to it.

This works fine in Chrome (Version 35.0.1916.114) but Firefox (Version. 29.0.1) the underline is crossing through the text instead of appearing under it. I believe it's something to do with the Cardiff font because when I try a 'Web Safe' font the underline is displayed correctly.

This is how the Cardiff font is being displayed

If I then change the font to Helvetica, this is how it's displayed

I've tried a few things already:

Wrapping the font in a span tag, then styling this as a block and giving it a height
I've also tried a solution provided in another question

Updated...

Using fixes provided by @touko I've put together a solution that isn't really what I wanted to settle for but it works.

I've used a border for Firefox and regular text-decoration for other browsers.

h2 {
    text-decoration: underline;
}

Firefox specific CSS styling as explained on this solution...

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

I hope someone finds a better solution than this though because it's more of a bodge job if anything.

回答1:

Seems like an issue with the font, you could try running it through the Font Squirrel Web Font Generator to see if that fixes it.

回答2:

Just dont use vertical-align: middle The similar problem is here: Link underline appearing above text in Firefox? But looks like your problem is with a font itself. I do not recommend to do a hack like border under the text. Search for other font.

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>

回答3:

You could use border-bottom as underline and set the space below to desirable with padding.

回答4:

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

来源：https://stackoverflow.com/questions/23991699/underline-text-decoration-is-crossing-through-the-imported-font-used-in-firefox

标签

css

font-face

underline