转换后的文本未对齐

Question

我正在尝试将文本环绕在一个圆圈的周围，如下所示：

我通过用 <span></span> 包装每个字母并给它们一个像这样的内联样式来实现这一点：<span style="--degrees: 9.2307692307692deg;">i</span>.

（这些数字是由PHP生成的，这就是他们如此疯狂的原因。）

我几乎完成了我想做的事情，但字母没有正确排列。例如，“查找”一词中的“我”要么太靠上，要么太靠下：

您可以看到下面的演示：

.circle {
  width: 193px;
  height: 193px;
  position: relative;
  display: inline-block;
  border: 2px solid #fff;
  border-radius: 50%;
  font-size: 15px;
  font-weight: bold;
  margin-right: 12px;
  margin-left: 0;
  padding: 0;
  cursor: pointer;
}

.circle span {
    transform: rotate(var(--degrees));
    position: absolute;
    height: 85px;
    color: #000;
    text-transform: uppercase;
    left: 50%;
    transform-origin: 50% 100%;
    font-weight: 900;
    font-family: Arial;
  /*  animation: rotate 20s linear infinite; */
}

.circle span.highlight {
    color: #439709;
}

@keyframes rotate {
  from { transform: rotate(var(--degrees))  }
  to { transform: rotate(calc(var(--degrees) + 359deg)) }
}

<span class="circle">
  <span style="--degrees: 0deg;">F</span>
  <span style="--degrees: 9.2307692307692deg;">i</span>
  <span style="--degrees: 18.461538461538deg;">n</span>
  <span style="--degrees: 27.692307692308deg;">d</span>
  <span style="--degrees: 36.923076923077deg;"> </span>
  <span style="--degrees: 46.153846153846deg;">O</span>
  <span style="--degrees: 55.384615384615deg;">u</span>
  <span style="--degrees: 64.615384615385deg;">t</span>
  <span style="--degrees: 73.846153846154deg;" class="highlight"></span>
  <span style="--degrees: 83.076923076923deg;" class="highlight">W</span>
  <span style="--degrees: 92.307692307692deg;" class="highlight">h</span>
  <span style="--degrees: 101.53846153846deg;" class="highlight">y</span>
  <span style="--degrees: 110.76923076923deg;"> </span>
  <span style="--degrees: 120deg;">F</span>
  <span style="--degrees: 129.23076923077deg;">i</span>
  <span style="--degrees: 138.46153846154deg;">n</span>
  <span style="--degrees: 147.69230769231deg;">d</span>
  <span style="--degrees: 156.92307692308deg;"> </span>
  <span style="--degrees: 166.15384615385deg;">O</span>
  <span style="--degrees: 175.38461538462deg;">u</span>
  <span style="--degrees: 184.61538461538deg;">t</span>
  <span style="--degrees: 193.84615384615deg;" class="highlight"> </span>
  <span style="--degrees: 203.07692307692deg;" class="highlight">W</span>
  <span style="--degrees: 212.30769230769deg;" class="highlight">h</span>
  <span style="--degrees: 221.53846153846deg;" class="highlight">y</span>
  <span style="--degrees: 230.76923076923deg;"> </span>
  <span style="--degrees: 240deg;">F</span>
  <span style="--degrees: 249.23076923077deg;">i</span>
  <span style="--degrees: 258.46153846154deg;">n</span>
  <span style="--degrees: 267.69230769231deg;">d</span>
  <span style="--degrees: 276.92307692308deg;"> </span>
  <span style="--degrees: 286.15384615385deg;">O</span>
  <span style="--degrees: 295.38461538462deg;">u</span>
  <span style="--degrees: 304.61538461538deg;">t</span>
  <span style="--degrees: 313.84615384615deg;" class="highlight"> </span>
  <span style="--degrees: 323.07692307692deg;" class="highlight">W</span>
  <span style="--degrees: 332.30769230769deg;" class="highlight">h</span>
  <span style="--degrees: 341.53846153846deg;" class="highlight">y</span>
  <span style="--degrees: 350.76923076923deg;"> </span>
</span>

我不知道这是转换元素的限制还是行高问题或者我需要做些什么来排列它们。任何想法表示赞赏。谢谢。

Answer 1

出现此问题是因为使用了可变间距字体。

如果你切换到等宽，那么一切看起来都不错：

.circle {
  width: 193px;
  height: 193px;
  position: relative;
  display: inline-block;
  border: 2px solid #fff;
  border-radius: 50%;
  font-size: 15px;
  font-weight: bold;
  margin-right: 12px;
  margin-left: 0;
  padding: 0;
  cursor: pointer;
}

.circle span {
    transform: rotate(var(--degrees));
    position: absolute;
    height: 85px;
    color: #000;
    text-transform: uppercase;
    left: 50%;
    transform-origin: 50% 100%;
    font-weight: 900;
    font-family: monospace;
  /*  animation: rotate 20s linear infinite; */
}

.circle span.highlight {
    color: #439709;
}

@keyframes rotate {
  from { transform: rotate(var(--degrees))  }
  to { transform: rotate(calc(var(--degrees) + 359deg)) }
}

<span class="circle">
  <span style="--degrees: 0deg;">F</span>
  <span style="--degrees: 9.2307692307692deg;">i</span>
  <span style="--degrees: 18.461538461538deg;">n</span>
  <span style="--degrees: 27.692307692308deg;">d</span>
  <span style="--degrees: 36.923076923077deg;"> </span>
  <span style="--degrees: 46.153846153846deg;">O</span>
  <span style="--degrees: 55.384615384615deg;">u</span>
  <span style="--degrees: 64.615384615385deg;">t</span>
  <span style="--degrees: 73.846153846154deg;" class="highlight"></span>
  <span style="--degrees: 83.076923076923deg;" class="highlight">W</span>
  <span style="--degrees: 92.307692307692deg;" class="highlight">h</span>
  <span style="--degrees: 101.53846153846deg;" class="highlight">y</span>
  <span style="--degrees: 110.76923076923deg;"> </span>
  <span style="--degrees: 120deg;">F</span>
  <span style="--degrees: 129.23076923077deg;">i</span>
  <span style="--degrees: 138.46153846154deg;">n</span>
  <span style="--degrees: 147.69230769231deg;">d</span>
  <span style="--degrees: 156.92307692308deg;"> </span>
  <span style="--degrees: 166.15384615385deg;">O</span>
  <span style="--degrees: 175.38461538462deg;">u</span>
  <span style="--degrees: 184.61538461538deg;">t</span>
  <span style="--degrees: 193.84615384615deg;" class="highlight"> </span>
  <span style="--degrees: 203.07692307692deg;" class="highlight">W</span>
  <span style="--degrees: 212.30769230769deg;" class="highlight">h</span>
  <span style="--degrees: 221.53846153846deg;" class="highlight">y</span>
  <span style="--degrees: 230.76923076923deg;"> </span>
  <span style="--degrees: 240deg;">F</span>
  <span style="--degrees: 249.23076923077deg;">i</span>
  <span style="--degrees: 258.46153846154deg;">n</span>
  <span style="--degrees: 267.69230769231deg;">d</span>
  <span style="--degrees: 276.92307692308deg;"> </span>
  <span style="--degrees: 286.15384615385deg;">O</span>
  <span style="--degrees: 295.38461538462deg;">u</span>
  <span style="--degrees: 304.61538461538deg;">t</span>
  <span style="--degrees: 313.84615384615deg;" class="highlight"> </span>
  <span style="--degrees: 323.07692307692deg;" class="highlight">W</span>
  <span style="--degrees: 332.30769230769deg;" class="highlight">h</span>
  <span style="--degrees: 341.53846153846deg;" class="highlight">y</span>
  <span style="--degrees: 350.76923076923deg;"> </span>
</span>

更新：以上不是完整的解决方案，因为它改变了字体。虽然可能会找到所需字体的可接受的单声道版本（例如，Arial 有单声道版本），但这不是适用于所有字体的通用解决方案。

此代码段定位内联块 div，而不是跨度并将字符置于其中。它还略微增加了高度，这样两个宽字符（例如 W 和 H）就不会相互挤压。显然，您需要尝试各种设置以获得您想要的外观。

.circle {
  width: 193px;
  height: 193px;
  position: relative;
  display: inline-block;
  border: 2px solid #fff;
  border-radius: 50%;
  font-size: 15px;
  font-weight: bold;
  margin-right: 12px;
  margin-left: 0;
  padding: 0;
  cursor: pointer;
}

.circle div {
  transform: rotate(var(--degrees));
  position: absolute;
  height: 85px;
  height: 100px;
  /* CHANGED */
  color: #000;
  text-transform: uppercase;
  left: 50%;
  transform-origin: 50% 100%;
  font-weight: 900;
  font-family: Arial;
  rletter-spacing: 0.2em;
  text-align: center;
  width: 2em;
  /*  animation: rotate 20s linear infinite; */
}

.circle div.highlight {
  color: #439709;
}

@keyframes rotate {
  from {
    transform: rotate(var(--degrees))
  }
  to {
    transform: rotate(calc(var(--degrees) + 359deg))
  }
}

<div class="circle">
  <div style="--degrees: 0deg; display: inline-block;">F</div>
  <div style="--degrees: 9.2307692307692deg;">i</div>
  <div style="--degrees: 18.461538461538deg;">n</div>
  <div style="--degrees: 27.692307692308deg;">d</div>
  <div style="--degrees: 36.923076923077deg;"> </div>
  <div style="--degrees: 46.153846153846deg;">O</div>
  <div style="--degrees: 55.384615384615deg;">u</div>
  <div style="--degrees: 64.615384615385deg;">t</div>
  <div style="--degrees: 73.846153846154deg;" class="highlight"></div>
  <div style="--degrees: 83.076923076923deg;" class="highlight">W</div>
  <div style="--degrees: 92.307692307692deg;" class="highlight">h</div>
  <div style="--degrees: 101.53846153846deg;" class="highlight">y</div>
  <div style="--degrees: 110.76923076923deg;"> </div>
  <div style="--degrees: 120deg;">F</div>
  <div style="--degrees: 129.23076923077deg;">i</div>
  <div style="--degrees: 138.46153846154deg;">n</div>
  <div style="--degrees: 147.69230769231deg;">d</div>
  <div style="--degrees: 156.92307692308deg;"> </div>
  <div style="--degrees: 166.15384615385deg;">O</div>
  <div style="--degrees: 175.38461538462deg;">u</div>
  <div style="--degrees: 184.61538461538deg;">t</div>
  <div style="--degrees: 193.84615384615deg;" class="highlight"> </div>
  <div style="--degrees: 203.07692307692deg;" class="highlight">W</div>
  <div style="--degrees: 212.30769230769deg;" class="highlight">h</div>
  <div style="--degrees: 221.53846153846deg;" class="highlight">y</div>
  <div style="--degrees: 230.76923076923deg;"> </div>
  <div style="--degrees: 240deg;">F</div>
  <div style="--degrees: 249.23076923077deg;">i</div>
  <div style="--degrees: 258.46153846154deg;">n</div>
  <div style="--degrees: 267.69230769231deg;">d</div>
  <div style="--degrees: 276.92307692308deg;"> </div>
  <div style="--degrees: 286.15384615385deg;">O</div>
  <div style="--degrees: 295.38461538462deg;">u</div>
  <div style="--degrees: 304.61538461538deg;">t</div>
  <div style="--degrees: 313.84615384615deg;" class="highlight"> </div>
  <div style="--degrees: 323.07692307692deg;" class="highlight">W</div>
  <div style="--degrees: 332.30769230769deg;" class="highlight">h</div>
  <div style="--degrees: 341.53846153846deg;" class="highlight">y</div>
  <div style="--degrees: 350.76923076923deg;"> </div>
</div>

转换后的文本未对齐

Transformed Text Not Lining Up

html

css

css-transitions