css - Angular 落里的文字阴影轮廓不完整

Question

我正在尝试使用 CSS text-shadow 属性为文本添加轮廓 here .
问题是阴影 Angular 并不总是相交。如果你看下面，你可以在 Y 的右上角看到问题。
这种字体看起来还不错，但是我的代码使用的一些字体却有很大的不同。

有没有办法让文本完全被框阴影包围，尤其是在 Angular 落里？

.shadowOutline {
  font: normal 200pt Arial;color: #fff;
  text-shadow: 
    -1px  1px #ff0000, 
    -1px -1px #ff0000, 
     1px  1px #ff0000, 
     1px -1px #ff0000, 
    -2px  2px #ff0000, 
    -2px -2px #ff0000, 
     2px  2px #ff0000, 
     2px -2px #ff0000;
  -webkit-font-smoothing: antialiased;
}

<div class="shadowOutline">My</div>

Answer 1

你可以用 svg 来做，而且你有一个完美的结果

text{font-size:100px;
  fill: none;
  stroke: red;
  stroke-width:2px;
  stroke-linejoin: round;
}

<svg height="120" width="480">
  <text x="0" y="90" >I love SVG!</text>
</svg>

或者您可以像这样直接将它与内联 css 一起使用:

<svg height="100" width="480">
<text x="0" y="80" fill="white" stroke="red" style="font-size:100px;stroke-width:2px;">I love SVG!</text>
</svg>