css - CSS：如何设置字符高度与行高的样式

Question

在这里忍受我，但假设这个代码：

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

你好世界

给出如下所示的结果：

███████████</p>

是否可以将样式仅应用于字母高度，而不是字体/行高？实际上最终得到如下所示的东西：

█▄██▄ ▄▄▄██</p>

Answer 1

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

如果你真的想要你刚刚在你的问题中展示的效果，我认为一个 JavaScript 函数可以将“短”字符（例如，“w”）转换为“▄”和“高”字符（例如，“h”）到“█”会很好用。这是关于 jsfiddle 的演示。

Answer 2

我想不出只使用 CSS 的方法，但是您可以在 PHP 中使用 imagefontheight 之类的函数：http://php.net/manual/en/function.imagefontheight.php并从指定的字体动态创建块元素...

Answer 3

我能想到的完全通过 CSS 获得效果的唯一方法是：

1. 过多的额外 html 标记。
2. 与角色本身相比，愿意允许背景高度存在一些轻微的不精确。
3. 对您将要使用的特定字体进行细致的测试，以查看您可能会在浏览器中获得什么结果。

换句话说：它确实值得付出努力，并且它可能应该只用于非常短的文本字符串。

这是一个示例，使用颜色左对比来查看背景如何适合字母。注意：这无疑会根据您看到的浏览器和字体对字母上方/下方的高度和间距有所不同。使用:before伪元素来实现效果意味着需要为较旧的浏览器（IE7 及以下）进行调整。

这是小提琴中的基本代码。

<span>H</span><span class="short">e</span><span>l</span><span>l</span><span class="short">o</span><span class="short">w</span> <span class="short">w</span><span class="short">o</span><span class="short">r</span><span>l</span><span>d</span>

  span {
    color: white;
    display: inline-block;
    position: relative;
    height: 1em;
  }

  span:before {
    content: '';
    position: absolute;
    top: .2em;
    right: 0;
    bottom: .1em;
    left: 0;
    background-color: black;
    z-index: -1;
  }

  span.short:before {
    top: .4em;
  }