文字轮廓效果

Question

CSS中有什么方法可以为不同颜色的文本提供轮廓？我想突出显示文本的某些部分以使其更直观-例如名称，链接等。更改链接颜色等现在很常见，因此我需要一些新的东西。

Answer 1

text-stroke在CSS3中有一个名为webkit的实验性属性，我一直在尝试使其工作一段时间，但到目前为止仍未成功。

相反，我使用的是已经受支持的text-shadow属性（我相信Chrome，Firefox，Opera和IE 9 支持该属性）。

使用四个阴影来模拟描边文本：

.strokeme {

  color: white;

  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;

}

<div class="strokeme">

  This text should have a stroke in some browsers

</div>

我在这里为你做了一个演示

和悬停的例子可以在这里找到

正如Jason C在评论中提到的那样text-shadow，除Opera Mini外，所有主流浏览器都支持CSS属性。我认为text-stroke应该使用CSS来解决此问题，以实现向后兼容（实际上并不是与自动更新的浏览器有关的问题）。

Answer 2

 text-stroke 现在已经相当成熟，并且已在大多数浏览器中实现。它更容易，更清晰，更精确。如果您的浏览器受众可以支持它，则现在应该text-stroke先使用而不是text-shadow。

您可以并且应该仅使用text-shadow没有任何偏移量的效果来执行此操作：

.outline {

    color: #fff;

    text-shadow: #000 0px 0px 1px;

    -webkit-font-smoothing: antialiased;

}

为什么？当您偏移多个阴影效果时，您会开始不舒服地注意到锯齿状的拐角：

仅将文本阴影效果放在一个位置就可以消除偏移，这意味着如果您觉得它太薄并且希望使用较暗的轮廓，那么没问题-您可以重复多次相同的效果（保持相同的位置和模糊）。像这样：

text-shadow: #000 0px 0px 1px,   #000 0px 0px 1px,   #000 0px 0px 1px,

             #000 0px 0px 1px,   #000 0px 0px 1px,   #000 0px 0px 1px;

这是一个效果的样本（顶部），相同的效果重复了14次（底部）：

另请注意：由于线条太细，因此最好使用关闭子像素渲染

-webkit-font-smoothing: antialiased。

Answer 3

简单！SVG来了。

这是一种简化的方法：

svg{

  font: bold 70px Century Gothic, Arial;

  width: 100%;

  height: 120px;

}

text{

  fill: none;

  stroke: black;

  stroke-width:0.5px;

  // stroke-dasharray: 2,2;

  stroke-linejoin: round;

  animation: 2s pulsate infinite;

}

@keyframes pulsate {

  50%{ stroke-width:4px; }

}

<svg viewBox="0 0 450 50">

  <text y="40">Scalable Title</text>

</svg>