css - 如何使用 CSS 仅在图标/字符周围绘制边框？

Question

我在使用 HTML 字符/图标/字体时一次又一次地遇到这个问题，但我仍然没有想出在不使用像素的情况下以一种干净的方式适合图标周围的边框。

   div {
      font-size: 5rem;
      display: inline;
    
      border: 1px solid red;
      position: absolute;
      top: 20%;
      left: 20%;
    }

<div>&times;</div>

这感觉不对而且不可扩展，但这是我想要实现的最终结果:(不使用像素)

div {
 font-size: 70px;
 display: inline;
 height: 39px;
 line-height: 30px;
 
 border: 1px solid red;
 position: absolute;
 top: 20%;
 left: 20%;
}

<div>&times</div>

无论字体大小是 11px、390% 还是 111rem，如何使边框完全适合 X。

Answer 1

这基本上不可能设置一次并使用多次，因为不同的字体可以使它们的字符在字体的上升高度(topline)和下降高度(beardline)之间以不同方式对齐。阅读更多:Wikipedia Typeface , Wikipedia Typography , Wikipedia Font

在我看来，最简单的方法是将行高设置为大约。字体大小的一半，无论字体大小如何，它的工作方式都相似，然后，某些字体类型可能需要触摸才能表现。

带有蓝色边框的“X”使用 em 并且仍然居中

div {
 font-size: 70px;
 line-height: 0.55;              /*  approx. half font size  */
 border: 1px solid red;
 position: absolute;
 top: 20%;
 left: 10%;
}

/* sample styling for this demo */
div + div {
 font-size: 140px;
 top: 14%;
 left: 30%;
}
div + div + div {
 font-size: 15em;
 top: 7%;
 left: 60%;
 border: 1px solid blue;
}

<div>&times</div>
<div>&times</div>
<div>&times</div>

---

旁注，并由 Norris 评论，使用 SVG 可能是另一种选择。