控制 HTML 中字符的垂直 space

Question

在下图中，'A'和'a'占据了同一垂直space。

是否可以更改某些内容，使 'a' 占用较少的垂直 space？

我想去掉绿色圈出的区域。

我试过调整行高，但没有成功。边距和填充也没有任何影响。 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 整合，并希望避免用户通过将套索放在绿色圆圈中而错误地选择字符 'a'。

Answer 1

您实际尝试做的事情（“[...] 想避免用户错误地选择文本 [...]”）有很多与您如何实现这一目标无关。实际上，您问的是 XY question。

要防止在浏览器中选择文本，只需创建一个 CSS class like

.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 和自动创建供应商前缀规则的东西更明智地做到这一点）。

然后，每当您的用户开始选择文本时，将 class 拍到他们可能正在绘制的文本上，这样他们的 gestures/mouse activity 就不会生成实际文本选择。

Answer 2

您可以使用 CSS 禁用文本选择。制作一个不可选择的 class 并将其应用于适用的文本元素：

.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 对于字体的所有字形都是相同的（当以给定的字体大小呈现时）。只有字形的 widths 不同（如果它是非等宽字体）。顺便说一句，这也是为什么使用非嵌入、非标准字体的 PDF 仍然需要在 /FontDescriptor 字典中包含一个 /Widths 数组，但不需要 [=12] 的技术原因=]数组...

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

我不认为你可以用 CSS 诡计来改变它。

控制 HTML 中字符的垂直 space

Controlling the vertical space of a character in HTML

html

css

fonts