Question

在这里跟我说，但假设这段代码：

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

Hello world

给出如下结果：

███████████

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

█▄██▄▄██

Answer 1

否（无论如何都没有背景颜色）。背景颜色适用于整个元素（例如，span元素），其基本上是由CSS框模型确定的框。来自W3C的official recommendation指定背景颜色将填充框模型的内容，填充和边框区域。 CSS3 background (candidate recommendation)为你控制背景颜色的位置提供了更多的力量，但并不多。

如果你真的想要你刚刚在你的问题中展示的效果，我认为JavaScript函数可以将“短”字符（例如“w”）转换为“”和“高”字符（例如，“h” “）到”█“会很好地工作。 Here's a demo on jsfiddle

Answer 2

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

Answer 3

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

多余的额外html标记。
与角色本身相比，愿意允许对背景的高度略微不准确。
对您要使用的特定字体进行大量测试，以了解您可能会在浏览器中获得哪些结果。

换句话说：它真的更值得付出努力，而且它可能只应用于非常短的文本串。

这里的an example fiddle字样颜色左对比，看看背景如何适合字母。 注意：根据浏览器和您看到的字体，这无疑会在字母高于/低于字母的位置有一些变化。使用: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;
  }

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

3 个答案: