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

Question

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

有没有办法让文本完全被 box-shadow 包围，尤其是在角落里？

.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

我设法使用以下方法让它变得更好一点：

\n\n

\r\n

\r\n

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

\r\n

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

\r\n

\r\n

\r\n

\n\n

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

\n\n

\n
• 左边
\n
• 正确的
\n
• 顶部
\n
• 底部
\n

\n\n

但是也

\n\n

\n
• 左上方
\n
• 右上
\n
• 左下方
\n
• 右下角
\n

\n\n

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

\n\n

看这个例子

\n\n

\r\n

\r\n

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

\r\n

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

\r\n

\r\n

\r\n

\n\n

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

\n\n

要获得“实心”10px 角轮廓，您必须使用 288 (= 4\xc3\x979\xc3\x978) 个阴影，即使这样，结果也将是尖角附近的垂直或水平线，而不是尖角。

\n