html - 使文字的笔划更大

Question

大家好。所以我的问题是如何使笔画更大胆？

我有这个示例代码

@import url('https://fonts.googleapis.com/css?family=Roboto:700');

body{
background:black;
}
h1 {
  text-align:center;
  text-shadow: 1px 1px 0 #FFFFFF, -1px -1px 0 #FFFFFF, 1px 1px 0 #FFFFFF, -1px 1px 0 #FFFFFF, 1px 1px 0 #FFFFFF;
  font-family: 'Roboto', sans-serif;
  text-transform:uppercase;
}

<h1>The quick brownfox jumps over the lazy dog</h1>

那么我怎样才能使白线更宽，如3px？

我已经尝试将它们全部更改为 3px 但它有一些小差距。

编辑:

如果你们中的任何人有一个仍然显示文本白线的替代解决方案，我将非常感激。

谢谢

Answer 1

我建议研究 SVG 解决方案，这里有一个很好的教程，解释得非常好 http://tutorials.jenkov.com/svg/text-element.html

body{
    background:black;
    color : #fff
}

<svg xmlns="http://www.w3.org/2000/svg" width="600" height="60">
    <text x="10" y="40"
        style="font-family: 'Arial Black', Gadget, sans-serif;
        font-size: 44px;
        stroke: #ffffff;
        stroke-width: 2px;
        fill: #000000;">
    THE QUICK BROWNFOX JUMPS OVER THE LAZY DOG
    </text>
</svg>

下面我稍微调整了您的代码 - 这个版本呈现得更整洁 - 间隙更少 - 但是要获得非常漂亮的粗笔画 SVG 将是一个更可靠的解决方案。

@import url('https://fonts.googleapis.com/css?family=Roboto:700');

body{
background:black;
}
h1 {
  text-align:center;
  text-shadow:
	-1px -1px 0 #fff,
	1px -1px 0 #fff,
	-1px 1px 0 #fff,
	1px 1px 0 #fff;
  font-family: 'Roboto', sans-serif;
  text-transform:uppercase;
}

<h1>The quick brownfox jumps over the lazy dog</h1>