【CSS】在圆上设置文字

没有什么超级简单的通法可以在圆（或任何类型的曲线）上设置css类型。

但这是可以完成的！

我们下面将在这里探索一种实现方法。

但是事先警告，我们将使用一些CSS3和JavaScript，不支持某些必需技术的旧版浏览器（IE7等等） 就请散场了吧。

如果您对一个实际的项目感兴趣，则最好还是使用带有适当alt文本的图像或适当的特征检测来为此类事情提供最好的解决方案，该功能可以在能够处理该问题的浏览器中通过这种技术翻转出图像。

一个例子

让我们继续一些简单的事情。

整个过程

让我们以简单的短语为例：

想象一下，如果我们将要尝试设置的单词围成一个圈，然后将它们分解成单个字母。

通过使用等宽字体，确保每个框的大小均相同。

现在让我们将每个方框放长一些，就像自行车轮辐一样。

然后，我们将所有这些辐条捆扎在一起，以使它们完全重叠。

现在想象一下，我们将那些辐条的末端固定到一个中心枢纽上。我们旋转每个辐条仅比最后一个旋转一点。

如果我们逆时针旋转父元素并删除红色参考线，则圆上会有一些文字！

技术位

为了能够像这样操作每个字母，您必须将它们包装在另一个元素中。

Lettering.js可以轻松为您做到这一点（jQuery和插件依赖性）。

所以你有这个。

<h1>Established 2012</h1>

您加载jQuery和Lettering.js，然后调用此代码：

$("h1").lettering();

并在DOM中变成了这样：

<h1>
  <span class="char1">E</span>
  <span class="char2">s</span>
  <span class="char3">t</span>
  <span class="char4">a</span>
  <span class="char5">b</span>
  <!-- you get the idea -->
</h1>

这实际上仅适用于等宽字体。即使通过将每个跨度设置为固定的来强制等距，每个字母之间的间距也将是错误的，并且看起来会很奇怪。如果您是疯子，可以通过手动调整每个旋转来手动调整它。

对于每个跨度，您想要设置高度，将它们全部放置在同一位置，然后将transform-origin设置在框的底部（以便它们围绕该中心旋转。

h1 span {
  font: 26px Monaco, MonoSpace;
  height: 200px;
  position: absolute;
  width: 20px;
  left: 0;
  top: 0;
  transform-origin: bottom center;
}

现在，您需要一堆类名称选择器，每个选择器旋转得更多。

.char1 { transform: rotate(6deg); }
.char2 { transform: rotate(12deg); }
.char3 { transform: rotate(18deg); }
/* and so on */

总代码

<style>
.badge {
  position: relative;
  width: 400px;
  border-radius: 50%;
  transform: rotate(-50deg);
}

h1 span {
  font: 26px Monaco, MonoSpace;
  height: 200px;
  position: absolute;
  width: 20px;
  left: 0;
  top: 0;
  transform-origin: bottom center;
}

.char1 {
  transform: rotate(6deg);
}

.char2 {
  transform: rotate(12deg);
}

.char3 {
  transform: rotate(18deg);
}

.char4 {
  transform: rotate(24deg);
}

.char5 {
  transform: rotate(30deg);
}

.char6 {
  transform: rotate(36deg);
}

.char7 {
  transform: rotate(42deg);
}

.char8 {
  transform: rotate(48deg);
}

.char9 {
  transform: rotate(54deg);
}

.char10 {
  transform: rotate(60deg);
}

.char11 {
  transform: rotate(66deg);
}

.char12 {
  transform: rotate(72deg);
}

.char13 {
  transform: rotate(78deg);
}

.char14 {
  transform: rotate(84deg);
}

.char15 {
  transform: rotate(90deg);
}

.char16 {
  transform: rotate(96deg);
}

.char17 {
  transform: rotate(102deg);
}

.char18 {
  transform: rotate(108deg);
}

.char19 {
  transform: rotate(114deg);
}

.char20 {
  transform: rotate(120deg);
}

.char21 {
  transform: rotate(126deg);
}

.char22 {
  transform: rotate(132deg);
}

.char23 {
  transform: rotate(138deg);
}

.char24 {
  transform: rotate(144deg);
}
</style>
<div id="page-wrap">
        
        <div class="badge">
          <h1>Established 2012</h1>
        </div>
    
    </div>
<script>
$(function() {
        $("h1").lettering();
    });
</script>

但是，这可能会变得很无聊而混乱。与Sass和Compass相比，它具有三个方面的优点：

@for $i from 1 through 100 
  .char#{$i} 
    +transform(rotate(($i*6)+deg))

更新

这是克里斯·埃普斯坦（Chris Eppstein）的Sass（.sass）mixin ，用于更扩展的文本旋转mixin：

=rotated-text($num-letters: 100, $angle-span: 180deg, $angle-offset: 0deg)
  $angle-per-char: $angle-span / $num-letters;
  @for $i from 1 through $num-letters
    .char#{$i} 
      +transform(rotate($angle-offset + $angle-per-char * $i))