1

鉴于我有字符串“Software”，我想减少“f”和“t”之间的间距，并保持其余的字符串间距不变。

此时我的 B 计划是在字母 f 和 t 周围添加一个跨度，但理想情况下我不必触摸标记。那么我的问题是：

有没有办法使用 CSS 或 SCSS 更改字符串的特定范围内的字母间距？

代码示例：

HTML

<h1>Software</h1>

CSS

h1{
   letter-spacing:-0.13em; //Is there a way to specify a range here?
}

这是B计划：

h1{
  font-size:5rem;
  font-family: 'Comfortaa', cursive;
}
span{
  letter-spacing: -0.13em;
}
<link href='https://fonts.googleapis.com/css?family=Exo+2|Michroma|Comfortaa' rel='stylesheet' type='text/css'>
<h1>SO<span>FT</span>WARE</h1>

4

2 回答 2

2

您想要的是正常的排版行为，通常称为“字距调整”，它以视觉上令人愉悦的方式调整字母内间距。例如：

在此处输入图像描述

字距调整是字体的功能。换句话说，有些字体有字距调整数据，而有些则没有。在上面的示例中，字体是 Times New Roman，其中包含字距调整信息。如您所见，“f”和“t”位置完美。

Comfortaa 没有字偶距。要解决您的问题，请使用包含字距调整数据的字体。

于 2016-01-22T09:21:45.917 回答
1

你不能给出一个范围，但你可以通过这种方式尝试。这可能对您有所帮助。

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <style type="text/css">
      .myclass{
        letter-spacing: 10px;
      }
    </style>
</head>
<body>

  <h1>I am a <span class="myclass">Software</span> Engineer</h1>



</body>
</html>

将您的特定字符串放在<span></span>标签内，如上所示。

于 2016-01-21T08:39:54.903 回答