带有轮廓和文本阴影的文本

Question

我想创建以下字体样式。如果不可能，我希望尽可能接近这种风格。我需要支持IE，因此我无法使用text-stroke。

我最接近的方式是使用多个text-shadow属性，例如：

h1 {
   color: #2e536f;
   font-weight: bold;
   font-family: sans-serif;
   font-size: 7em;
   text-transform: uppercase;
   text-shadow:
     -1px -1px 0 #fff,
      1px -1px 0 #fff,
     -1px 1px 0 #fff,
      1px 1px 0 #fff,
     -2px -5px 0px #ff7c7c;
}

body {
    background: #2e536f; 
}

<h1>Zwei</h1>

虽然它可以执行多项任务，但我无法使颜色透明，以显示其背后的文字阴影。

我该如何解决这个问题？

Answer 1

如果您需要支持IE，最好的办法是选择SVG。您可以轻松为文本提供笔触和/或阴影，以创建您正在寻找的确切样式。这可以适合标题，但可能是跨越多行的文本的麻烦 以下是内联SVG的示例：

＆＃13;

＆＃13;

body {
  background: #2e536f;
}
svg {
  font-weight: bold;
  font-family: sans-serif;
}

＆＃13;

<svg viewbox="0 0 10 3">
  <text font-size="3" x="1.5" y="2.5" dx="0" dy="0" fill="#FF7C7C">ZWEI</text>
  <text font-size="3" x="1.5" y="2.5" dx="0.1" dy="0.15" fill="transparent" stroke="#fff" stroke-width="0.08">ZWEI</text>
</svg>

＆＃13;

＆＃13;

＆＃13;

请注意，使用SVG（即使是标题）也不会影响搜索引擎优化和google indexes SVG since 2010

Answer 2

＆＃13;

＆＃13;

body {
    background: #2e536f; 
}

h1 {
   color: #2e536f;
   font-weight: bold;
   font-family: sans-serif;
   font-size: 7em;
   text-transform: uppercase;
   text-shadow:
     -1px -1px 0 #fff, 1px -1px 0 #fff, 1px 1px 0 #fff, 1px 1px 0 #fff, 2px -5px 0px #ff7c7c
}

＆＃13;

<h1>Zwei</h1>

＆＃13;

＆＃13;

＆＃13;

这可以接近您的预期输出吗？