有没有办法在[sans-serif]文本之前（或之后）删除字体内空间？

Question

参见示例代码：

＆＃13;

＆＃13;

span {
  font-size: 150px;
  background: lightgray;
  margin: 8px 0px;
}
.sans-serif { font-family: sans-serif; }
.serif { font-family: serif; }

＆＃13;

<span class="sans-serif">Done</span>
<br>
<span class="serif">Done</span>

＆＃13;

＆＃13;

＆＃13;

我假设额外的空间是＆＃34;内置＆＃34;，但是有办法以某种方式删除它吗？

我试图将一些巨大的页面标题与下面小得多的字幕对齐。

Answer 1

您可以添加减去左边距。请参阅此处：https://jsfiddle.net/mna56yf9/5/但是如果您计划使用背景颜色，则可能必须将其应用于包装div。

span{
  margin-left: -20px;
}

Answer 2

这没有正确的方法，因为它是以这种方式显示的字体。请考虑以下示例：

span {
  font-size: 150px;
  background: lightgray;
  margin: 8px 0px;
}
.sans-serif { font-family: sans-serif; }
.serif      { font-family: serif; }
.serif2     { font-family: Times; }

<span class="sans-serif">Done</span>
<br>
<span class="serif">Done</span>
<br>
<span class="serif2">Done</span>

如果我的电脑中有衬线，则上面的图像有不同的布局。所以，这是一个试验和错误的基础，你必须确保你在所有的计算机和浏览器中做得很好。 Times字体非常适合，serif字体有一些空格。这就是为什么我说这是一个试错方法。

唯一 hacky 解决方案是根据字体使用内容的负余量，不能概括它。