定义笔画时，使用 CSS 设计文本样式，就像加粗的 svg 文本一样

Question

当定义 svg 文本的属性“笔划”时，文本看起来更粗。

我在 webkit、gecko 和 trident 中得到了相同的结果。

我正在与一位使用 svg 的设计师合作，我希望获得与他设计的相同的结果，但在 html/css 中。

例子：

<div>bla - html</div>
<div style="font-weight:bold">bla - html bold</div>
<svg height="30px"><text x="0" y="20">bla - svg</text></svg>
<svg height="30px"><text x="0" y="20" stroke="#000000">bla - svg stroke</text></svg>

结果截图：

我如何在 html/css 中模拟它？

Answer 1

如果您不设置 a stroke-width，则默认值为1 表示 1 像素：

尝试这个 ：

<svg height="30px"><text x="0" y="20"  stroke-width="0" stroke="#000000">bla - svg stroke width 0</text></svg>
<svg height="30px"><text x="0" y="20"   stroke="#000000">bla - svg stroke no width defined</text></svg>
<svg height="30px"><text x="0" y="20"  stroke-width="1" stroke="#000000">bla - svg stroke width 1</text></svg>
<svg height="30px"><text x="0" y="20"  stroke-width="2" stroke="#000000">bla - svg stroke width 2</text></svg>

此时

text-stroke实际上可以在 webkit 中使用，使用供应商前缀。亦是如此text-fill。

在不久的将来它可能是也可在其他浏览器中使用，请在此处查看：http ://caniuse.com/text-中风

如何在 webkit 浏览器中使用它：

https://developer.apple.com/library/safari/documentation/appleapplications/reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-_webkit_text_中风

例子

p {
  letter-spacing: 1px;
  -webkit-text-stroke: red 1px;
}

<p style="color:white;font:bold 30px arial">text stroke width 1</p>

目前

要在CSS中描边文本，您需要使用多个text-shadow来根据需要增加阴影，将其变成完整的描边颜色。

http://codepen.io/anon/pen/xklIi/

（用于描边效果的阴影越大，需要重复、重画的次数就越大）

p {
  font-wheight:bold;
  letter-spacing:1px;
  color:white;
}
[data-stroke="1"] {
  text-shadow:
    0 0 1px red,
    0 0 1px red,
    0 0 1px red,
    0 0 1px red,
    0 0 1px red,
    0 0 1px red,
    0 0 1px red,
    0 0 1px red,
    0 0 1px red;
}
[data-stroke="2"] {
  text-shadow:
    0 0 2px red,
    0 0 2px red,
    0 0 2px red,
    0 0 2px red,
    0 0 2px red,
    0 0 2px red,
    0 0 2px red,
    0 0 2px red,
    0 0 2px red,
    0 0 2px red;
}
[data-stroke="2sharp"] {
  text-shadow:
    0 0 2px red,
    0 0 2px red,
    0 0 2px red,
    0 0 2px red,
    0 0 2px red,
    0 0 2px red,
    0 0 2px red,
    0 0 2px red,
    0 0 2px red,
    0 0 2px red,
    0 0 2px red,
    0 0 2px red,
    0 0 2px red,
    0 0 2px red,
    0 0 2px red,
    0 0 2px red,
    0 0 2px red,
    0 0 2px red,
    0 0 2px red,
    0 0 2px red,
    0 0 2px red,
    0 0 2px red,
    0 0 2px red,
    0 0 2px red,
    0 0 2px red,
    0 0 2px red,
    0 0 2px red,
    0 0 2px red,
    0 0 2px red,
    0 0 2px red,
    0 0 2px red,
    0 0 2px red,
    0 0 2px red,
    0 0 2px red,
    0 0 2px red,
    0 0 2px red,
    0 0 2px red,
    0 0 2px red,
    0 0 2px red,
    0 0 2px red,
    0 0 2px red,
    0 0 2px red,
    0 0 2px red,
    0 0 2px red,
    0 0 2px red,
    0 0 2px red;
}

<p data-stroke="1">bla - text stroke width 1</p>
<p data-stroke="2">bla - text stroke width 2</p>
<p data-stroke="2sharp">bla - text stroke sharp width 2</p>