Question

我希望页面标题由几个span元素组成，以便我可以对字母进行不同的样式设置，但是我一直在字母之间留一个空格，尤其是大写W和小写字母o由于某种原因。我曾尝试给父元素font-size: 0px，但仍然有一个空格。

在我的示例中，您可以看到顶部的单个单词span中有一个单词，而底部的一个单词则分为几个spans。我给它们提供了背景色，因此您可以看到，由于W和o，底部的颜色要长几个像素。

body {
  background-color: #fff;
  color: #636b6f;
  font-family: 'Nunito', sans-serif;
  font-weight: 200;
  height: 100vh;
  margin: 0;
  background: lightsteelblue;
}

.page {
  text-align: center;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}

.flex-center {
  align-items: center;
  display: flex;
  justify-content: center;
}

.position-ref {
  position: relative;
  z-index: 0;
}

.m-b-md {
  padding-top: 15px;
  width: 100vw;
  color: #fff;
}

.words {
  color: #725ed7;
  position: relative;
  display: inline-block;
}

.l_o {
  font-size: 9.75vw;
  background: #203040;
}

.title {
  height: 10vw;
  font-size: 0px;
}

<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">

<div class="flex-center position-ref">
  <div class="page">
    <div class="title m-b-md">
      <span class=words>
            <span class=l_o>Word</span>
      <br>
      <span class=l_o>W</span><span class=l_o>o</span><span class=l_o>rd</span>
      </span>
    </div>
  </div>
</div>

Answer 1

如果字符位于单独的元素中，则某些字体效果将不再适用。特别值得注意的是连字，例如“ fi”。

在这种情况下，问题在于font kerning在第一个示例中正在调整“ W”和“ o”字符之间的间距，但在第二个示例中却不能。如果要标准化两者，则必须禁用font-kerning。

<!doctype html>
<html>
  <head>
    <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
    <style>

      body {
        background-color: #fff;
        color: #636b6f;
        font-family: 'Nunito', sans-serif;
        font-kerning: none;
        font-weight: 200;
        height: 100vh;
        margin: 0;
        background: lightsteelblue;
      }

      .page {
        text-align: center;
        display: flex;
        flex-flow: column;
        justify-content: center;
        align-items: center;
      }

      .flex-center {
        align-items: center;
        display: flex;
        justify-content: center;
      }

      .position-ref {
        position: relative;
        z-index: 0;
      }

      .m-b-md {
        padding-top: 15px;
        width: 100vw;
        color: #fff;
      }

      .words {
        color: #725ed7;
        position: relative;
        display: inline-block;
      }

      .l_o {
        font-size: 9.75vw;
        background: #203040;
      }

      .title {
        height: 10vw;
        font-size: 0px;
      }

    </style>
  </head>
  <body>
    <div class="flex-center position-ref">
      <div class="page">
        <div class="title m-b-md">
          <span class=words>
            <span class=l_o>Word</span>
            <br>
            <span class=l_o>W</span><span class=l_o>o</span><span class=l_o>rd</span>
          </span>
        </div>
      </div>
    </div>
  </body>
</html>

另一种方法是尝试手动管理letter-spacing，这容易出错。

Answer 2

每个span是独立于框模型的inline框，因此字体字形不是独立的字符串。您可以通过设置letter-spacing替代来减轻预期的影响。希望这会有所帮助，加油！

<!doctype html>
<html>
  <head>
    <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
    <style>
    
      .glyph-fix {
        letter-spacing: -1px;
      }

      body {
        background-color: #fff;
        color: #636b6f;
        font-family: 'Nunito', sans-serif;
        font-weight: 200;
        height: 100vh;
        margin: 0;
        background: lightsteelblue;
      }

      .page {
        text-align: center;
        display: flex;
        flex-flow: column;
        justify-content: center;
        align-items: center;
      }

      .flex-center {
        align-items: center;
        display: flex;
        justify-content: center;
      }

      .position-ref {
        position: relative;
        z-index: 0;
      }

      .m-b-md {
        padding-top: 15px;
        width: 100vw;
        color: #fff;
      }

      .words {
        color: #725ed7;
        position: relative;
        display: inline-block;
      }

      .l_o {
        font-size: 9.75vw;
        background: #203040;
      }

      .title {
        height: 10vw;
        font-size: 0px;
      }

    </style>
  </head>
  <body>
    <div class="flex-center position-ref">
      <div class="page">
        <div class="title m-b-md">
          <span class=words>
            <span class=l_o>Word</span>
            <br>
            <span class="glyph-fix">
               <span class=l_o>W</span><span class=l_o>o</span><span class=l_o>rd</span>
            </span>
          </span>
        </div>
      </div>
    </div>
    </script>
  </body>
</html>

跨距

2 个答案: