在HTML中控制字符的垂直空间

Question

在下图中，＆＃39; A＆＃39;和＆＃39; a＆＃39;占据相同的垂直空间。

是否可以更改某些内容，以便＆＃39; a＆＃39;占用较少的垂直空间？

我想摆脱绿色环绕的区域。

我尝试玩线高，但徒劳无功。 边距和填充也没有任何影响。 在HTML下面：

<svg height="800" width="800">
  <text font-size="150px" fill="black" x="30" y="300"
        style="line-height: -10px;">A</text>
  <text font-size="150px" fill="red" x="130" y="300"
        style="line-height: 0em;">a</text>
</svg>

也许有字体可以处理，但我无法找到它们。

编辑：我会将此文字与lasso plugin进行整合，并希望避免用户选择字符＆＃39; a＆＃39;错误地将套索放在绿色环绕的区域中。

Answer 1

您实际上想要做的事情（＆＃34; [...]希望避免用户错误地选择文字[...] ＆＃34;）与你如何努力实现这一点毫无关系。实际上，您已经问了XY question。

为了防止在浏览器中选择文本，只需创建一个类似

的CSS类

.notselectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

（或仅使用user-select:none以及自动创建供应商前缀规则的内容更明智地做到这一点。）

然后，当您的用户开始选择文本时，将该类打到他们可能正在绘制的文本上，这样他们的手势/鼠标活动就不会导致实际的文本选择。

Answer 2

您可以使用CSS禁用文本选择。创建一个不可选择的类，并将其应用于适用的文本元素：

.unselectable {
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

最好在开始使用套索时添加它，然后将其删除，以便在不使用套索时可以选择文本。

Answer 3

以蓝色突出显示的是字形的 BoundingBox 。其度量在文档使用的字体文件中定义（无论是HTML，ODT，DOCX还是PDF）。

通常，此BoundingBox的 height 对于字体的所有字形都是相同的（当以给定的字体大小呈现时）。只有字形的 width 确实不同（如果它是非等宽字体）。顺便说一句，这也是为什么使用非嵌入式非标准字体的PDF仍需要在/Widths字典中包含/FontDescriptor数组的技术原因，但它们不需要{{1数组...

您可以使用所有字母，大写和小写字母（包括所有数字）创建HTML测试页来自行检查。

我认为你不能用CSS技巧改变它。