角落的文字阴影轮廓不完整

Question

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

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

.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>

Answer 2

我设法让它变得更好一点：

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

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

重点是在各个方向上偏移文本阴影：

• 左
• 对
• 顶部
• 底部

还有

• 左上角
• 右上角
• 左下角
• 右下

请记住，对于大于 1 像素的值，您必须填充锐角阴影的间隙。参见例如带有（尝试）十像素粗轮廓的字母“X”，首先由八个阴影组成，第二个由二十四个阴影组成：

看这个例子

span {
  font: normal 200pt Arial;
  color: #fff;
  letter-spacing: 20px
}
.eight-shadows {
  text-shadow:
   -10px -10px 0 #f00, 
    00px -10px 0 #f00, 
    10px -10px 0 #f00, 
    10px  00px 0 #f00, 
    10px  10px 0 #f00, 
    00px  10px 0 #f00, 
   -10px  10px 0 #f00, 
   -10px  00px 0 #f00;
}
.twenty-four-shadows {
  text-shadow: 
   -10px -10px 0 #f00, 
    00px -10px 0 #f00, 
    10px -10px 0 #f00, 
    10px  00px 0 #f00, 
    10px  10px 0 #f00, 
    00px  10px 0 #f00, 
   -10px  10px 0 #f00, 
   -10px  00px 0 #f00,

   -05px -10px 0 #f00, 
    00px -10px 0 #f00, 
    05px -10px 0 #f00, 
    05px  00px 0 #f00, 
    05px  10px 0 #f00, 
    00px  10px 0 #f00, 
   -05px  10px 0 #f00, 
   -05px  00px 0 #f00, 

   -10px -05px 0 #f00, 
    00px -05px 0 #f00, 
    10px -05px 0 #f00, 
    10px  00px 0 #f00, 
    10px  05px 0 #f00, 
    00px  05px 0 #f00, 
   -10px  05px 0 #f00, 
   -10px  00px 0 #f00
}

<span class="eight-shadows">X</span>
<span class="twenty-four-shadows">X</span>

（事实上，这个示例可以省略中间的“水平”阴影块，因为它不包含尖锐的垂直角，但为了清楚起见，我把它留在那里。）

要获得“实心”的 10 像素角轮廓，您必须使用 288 (= 4×9×8) 阴影，即使这样，结果也会是锐角附近的垂直或水平线，而不是锐角。

Answer 3

如果您对自己的轮廓稍微“模糊”一点没问题，使用text-shadow 上的第三个可选属性可以帮助缩小您在“Y”上看到的那些空白。

来自MDN article for text-shadow：

价值观

<color>

可选。可以在偏移之前或之后指定 价值观。如果未指定颜色，将使用 UA 选择的颜色。 注意：如果要确保跨浏览器的一致性，请明确 指定颜色。

<offset-x> <offset-y> 必需。这些长度值 指定阴影与文本的偏移量。 <offset-x> 指定 水平距离；负值将阴影放置在 文本。 <offset-y> 指定垂直距离；负值 将阴影置于文本上方。如果两个值都为 0，则 阴影放置在文本后面（并且可能会产生模糊效果 已设置）。要了解您可以使用哪些单位，请参阅 .

<blur-radius> 可选。这是一个值。如果不 指定，默认为0。这个值越高，越大 模糊;阴影变得更宽更亮。

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

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

Answer 4

提醒：为此，您可以使用-webkit-text-stroke（最好与-webkit-text-fill-color结合使用，它也适用于当前的Firefox（49+）：

.shadowOutline {
  font: normal 200pt Arial;
  color: red;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 2px red;
}

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

有能力的浏览器将围绕透明字母渲染轮廓，其他不透明（红色）字母，因此这比不支持text-shadow的浏览器中的白色背景上的白色文本更可靠。