【问题标题】：Styling text using CSS like thicker svg text when stroke is defined定义描边时使用 CSS 设置文本样式，如较粗的 svg 文本
【发布时间】：2014-03-30 13:32:23
【问题描述】：

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

我在 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 中模拟？

【问题讨论】：

标签： html css svg

【解决方案1】：

如果您没有设置 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-stroke

如何在 webkit 浏览器中使用：

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

暂时

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

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

（用于描边效果的阴影越大，需要重复、重绘）

/* using CSS3 selector filters older browser, you can reset freely letter-spacing here */
  [data-stroke="1"] {/* class can be used */
  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"] {
  letter-spacing:2px /* you might need to reset letter-spacing to
  keep text readable */
  text-shadow:/* repeat until sharp enouggh */
    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;
}

HTML

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

【讨论】：

谢谢，这回答了我的问题。您能否补充一下，您只能在 webkit 上使用“-webkit-text-stroke”，而不是许多 text-shadow，我会接受您的回答。
@Oli 谢谢，我现在添加了有关 webkit 可能性的信息。祝你有美好的一天

【解决方案2】：

SVG 文本元素具有属性：stroke-width, stroke, and **fill**。

试试这个：

<svg id="mySVG" width="400" stroke="black" fill="red" height="400">
<text x=50 y=50 font-size="50"  >ABCD</text>
<text x=50 y=100 font-size="50" stroke="none"  >ABCD</text>
<text x=50 y=150 font-size="50" fill="red" >ABCD</text>
<text x=50 y=200 font-size="50" fill="none" stroke="green" >ABCD</text>
<text x=50 y=250 font-size="50" fill="red" stroke="green" >ABCD</text>
<text x=50 y=330 font-size="100" fill="red" stroke="black" stroke-width="5" >ABCD</text>

【讨论】：

我偶然发现了这个页面，试图弄清楚为什么我的 SVG 文本在定义描边时看起来太大了。将 stroke-width 设置为 0 并使用 fill 非常适合我。所以，虽然这在技术上可能是对不同问题的回答，但它确实帮助了我:)