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

＆＃13;

body{
    background:black;
    color : #fff
}

＆＃13;

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

＆＃13;

下面我稍微调整了你的代码 - 这个版本有点整洁 - 更少的差距 - 然而要获得一个非常好的厚实的SVG将是一个更可靠的解决方案。

＆＃13;

@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;
}

＆＃13;

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

＆＃13;

Answer 2

如果与目标浏览器兼容，则可能使用 text-stroke财产。请注意它不是标准功能，因此它可能不可靠。不幸的是，似乎没有一种标准的方法来实现你想要的，除了宽度为1像素。

您可以采用替代路线创建轮廓文本作为图像添加到您的页面。

@import url('https://fonts.googleapis.com/css?family=Roboto:700');

body{
background:black;
}

h1 {
   text-align:center;
   font-family: 'Roboto', sans-serif;
   -webkit-text-stroke-width: 3px;
   -webkit-text-stroke-color: #FFFFFF;
   text-transform:uppercase;
}

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

使文本的笔划更大

2 个答案: