在圆形上设置文本

在圆形（或任何曲线）上设置网页文本没有非常简单且标准化的方式。但它可以做到！我们将在本文中探讨一种方法。但请注意，我们将使用一些 CSS3 和 JavaScript，并且不会理会不支持某些必需技术的旧版浏览器。如果您对实际项目感兴趣，此类内容可能仍然最适合使用带有适当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>

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

对于每个 span，您都需要设置高度，将它们全部放置在同一个位置，然后将 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 */

查看 CSS-Tricks 的 CodePen 在圆圈上设置文本 – 2012 (@css-tricks) 在 CodePen 上。

但是，这可能会变得乏味且杂乱。使用 Sass 和 Compass，它只需要三行代码

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

更新

这是一个来自 Chris Eppstein 的 Sass (.sass) 混合宏，用于更可扩展的文本旋转混合宏

=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))