增加 unicode 符号的文本大小占用太多边距答案

【问题标题】：Increasing the text size of unicode symbol occupies too much margin增加 unicode 符号的文本大小占用太多边距
【发布时间】：2014-05-11 21:41:12
【问题描述】：

我想使用一个 unicode 符号并且我想做得很大。但是当我这样做时，它需要很多我无法控制的边距和填充。即使我将边距和填充设置为零也不能解决问题。所以我该怎么做？普通文本的行为是正常的，除了微小的 unicode 符号。

这是一个 180pt 大小的符号，我突出显示了它，以便您可以看到它周围的空间量！

编辑：

我尝试使用普通字符“a”，但它采用了相同的边距/填充！

【问题讨论】：

默认情况下，字体中的大多数字符在其设计中都有一些填充。一些字符可能有超过“预期”的填充——一个很好的例子是数字“1”，它通常被填充为与所有其他数字一样宽。您对哪个符号有疑问？
好的，这是一个希伯来语 aleph 'ℵ' (U+2135) 和（对书呆子表示歉意）使用字体 Lucida Grande。您可以添加另一张显示“正常”/“预期”填充的角色图片吗？
@Jongware 哦，我尝试使用“a”，但效果相同，占用的空间相同。那怎么了！？！
没什么。这种类型的填充是内置在字符本身中的。似乎您正在尝试对并非设计用于的文本做一些事情；完成它的一种方法是使用图像。
虽然这是一封信的预期行为，但在某种程度上您可以通过line-height 属性来控制它。

标签： html css

【解决方案1】：

这种间距嵌入在字体字形本身中，除了行高属性之外，CSS 无法真正克服。

如果您想要矢量化字形，我会改用 SVG 元素。

【讨论】：

【解决方案2】：

空白空间既不是边距也不是填充，而是字体设计师设计的字形的一部分。字形通常被设计成连续的字形不会相互接触，因此即使文本设置为实心（在 CSS 术语中，当 line-height 为 1 时），字形通常也不会接触其他行上的字形。

这意味着，如果您希望字形出现在包围 is 的最小矩形中，这似乎是这里的目标，您必须与排版设计作斗争。没有简单的方法可以做到这一点。对于特定字符和特定字体，假设始终使用该字体（这在网络上通常是一个不切实际的假设），您可以（通过实验）找出替换字符所需的合适值。示例：

<style>
.tight {
  font-size: 180pt;
  font-family: Lucida Sans Unicode;
  background: #aaf;
  display: inline-block;
  position: relative;
  width: 0.537em;
  height: 0.63em;

}
.tight span {
  position: absolute;
  left: -0.059em;
  top: -0.385em;
}
</style>           
<span class=tight><span>&#x2135;</span></span>

结果（当 Lucida Sans Unicode 可用时）：

这里的想法是将字形放置在 span 元素内，该元素位于外部 span 元素内，以便外部元素具有所需的背景颜色，并将其宽度和高度设置为与可见的尺寸相匹配字形的一部分，通过实验获得。内部span 元素使用“绝对”定位从其自然位置移位，这实际上意味着相对于外部元素定位它。

【讨论】：