CSS:如何设置字符高度与行高的样式

Question

在这里忍受我,但假设这段代码:

<style>
  span {
    color: black;
    background-color: black;
  }
</style>
<span>Hello world</span>

你好,世界

给出如下结果:

███████████

是否可以将样式应用于字母高度,而不是字体/行高？实际上最终结果是这样的:

█▄██▄▄██

Answer 1

不（无论如何都没有背景颜色）。背景颜色应用于整个元素（例如，span 元素），该元素本质上是由 CSS 框模型确定的框。W3C 的官方建议指定背景颜色将填充盒模型的内容、填充和边框区域。CSS3背景（候选推荐）为您提供了更多控制背景颜色应用位置的功能，但不多。

\n\n

如果你真的想要你刚刚在问题中演示的效果，我认为 JavaScript 函数可以将“短”字符（例如“w”）转换为“\xe2\x96\x84”和“高”字符（例如，“h”）到“\xe2\x96\x88”会很好地工作。这是 jsfiddle 上的演示。

\n