有没有办法将内容集中在子像素级别？

Question

最简单的问题是，如何在此处垂直居中。为了获得几何精度，我有没有办法牺牲易读性？

我试过text-rendering: geometricPrecision没有运气。

＆＃13;

＆＃13;

<div 
  style="
    position: relative;
    top: 30px;
    left: 30px;
    width: 10px;
    height: 10px;
    background: green;
    color: white;
    border-radius: 50%;
    font-family: monospace;
    font-weight: bold;
    font-size: 8px;
    text-align: center;
    line-height: 10px;
    text-rendering: geometricPrecision;
  ">
  2
</div>

＆＃13;

＆＃13;

＆＃13;

以下是一些微调，以便您可以看到我希望它看起来像：

＆＃13;

＆＃13;

<div 
  style="
        position: relative;
        top: 30px;
        left: 30px;
        width: 10px;
        height: 10px;
        background: green;
        border-radius: 50%;
        font-size: 0;
        text-align: center;
  ">
    <div 
      style="
            display: inline-block;
            position: relative;
            font-weight: bold;
            font-family: monospace;
            line-height: 10px;
            font-size: 8px;
            transform: translate3d(5%, 7%, 0);
            color: white;
      ">
      2
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;