Question

我最近注意到我的斜体文字（少于0.1em）的边角被剪掉了。经检查，“字体样式：斜体”所产生的倾斜度已超出文本的宽度，并被切掉。我尝试在此处使用此修复程序：

html italic letters protrude from their container (and may be cut by the next container' background)

但是设置右填充仅在文本宽度周围添加了一个缓冲区。文字本身的自动宽度仍会遮断边缘（由于更改，我无法将其固定为某个值）。

是否可以在 width本身中添加“填充”来解决此问题？例如它将采用文本的宽度并将其扩展一定的量，例如0.1 em。如果无法做到这一点，是否还有另一种方法可以创建斜体文本而不会超出自动宽度呢？

Answer 1

有点晚了，但也许对别人有帮助。要查看文本容器中的截止字体，您可以使用可见溢出，例如此处的示例：

.text-container {
   overflow: visible;
}

它不再被剪切，如果您不需要在后端复制相同的文本，它应该可以正常工作。

示例：

.text {
display: inline-block;
font-size: 250px;
font-family: 'Great Vibes', cursive;
overflow: hidden;
}

.text-container {
overflow: visible;
}

<html>
<head>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap" rel="stylesheet">
</head>
<body>
<div class="text">
eee
</div>
<br />
<div class="text text-container">
eee
</div>
</body>
</html>

Answer 2

这是很棘手的事情，但是假设您的文本行仅是一行，那么您也许可以摆脱这种情况：

.em::after {
  padding: 1px;
  content: '';
}

添加一个空的内容字符串将使幻像填充出现。这应该给您一点空间。我相信这对于换行是无效的。

快速编辑，实际上可能会更好。

Answer 3

padding-right似乎可以很好地解决与容器重叠的斜体字体（如下所示）的问题。看来您的问题必须与代码中的某些问题相关，而这些问题从您的问题中看不出来。

span {
  font-size: 3em;
  border: 1px solid red;
}

.italic {
  font-style: italic;
}

.fix {
  padding-right: .1em;
}

<div>
  <div>Container overlap:</div>
  <span class="italic">word</span><span>word</span>
</div>
<br>
<div>
  <div>Container overlap fix:</div>
  <span class="italic fix">word</span><span>word</span>
</div>

“字体样式：斜体”使文本从容器突出，切断文本

3 个答案: