css - 字体被IE/ME截断

Question

我遇到了一个问题，IE 和 Microsoft Edge 会截断我的 h1 标签中的最后一个字母，如果它是一个高字母(例如 l、d)。

它应该是这样的:

对比 IE 和 ME 的渲染方式:

@font-face {
    font-family: Edwardian;
    src: url('font/EdwardianScriptITC.eot');
    src:url("file:///projects/font/EdwardianScriptITC.eot");
      src: url('font/EdwardianScriptITC.eot?#iefix') format('embedded-opentype'),
        url('font/EdwardianScriptITC.svg') format('svg'),
        url('font/EdwardianScriptITC.woff') format('woff'),
        url('font/EdwardianScriptITC.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    line-height: 1.5;
}
header h1 {
    font-weight: 900;
    font-size: 5em;
    color: #000;
    margin-left: 15px;
    margin-bottom: -35px;
    overflow: visible;
}
.content, .page-content {
    margin: auto;
}

<div class="page-container">
  <header class="content">
    <h1 class="cursive">Industrial</h1>
  </header>
</div>

Answer 1

添加 letter-spacing: .08em; 和在 H1 标签后添加   一样有效。 Solution和另一个 solution .