Html 使用css的跨浏览器文本轮廓厚度

我需要为文本提供提纲。这些文字可以是联赛名称，如巴克莱超级联赛、国家足球联赛等

我最接近的跨浏览器支持来自下面的链接

但我需要的轮廓厚度可以在10-20像素之间变化

这是我努力做到的。请帮忙

这就是我所做的

<style>
.element {
width: auto;  
     height: auto; /* width/height so IE7 and lower will work */  
     filter: glow(color=black,strength=1);  
     text-shadow: -10px -10px 0 #000,   
     10px -10px 0 #000,   
     -10px 10px 0 #000,   
     10px 10px 0 #000;
     font-size:56px;
     font-weight:bold;
     color:#FFF;  
}
</style>

.元素{
宽度：自动；
高度：自动；/*宽度/高度，因此IE7和更低版本可以工作*/
过滤器：发光（颜色=黑色，强度=1）；
文本阴影：-10px-10px 0#000，
10px-10px 0#000，
-10px 10px 0#000，
10px 10px 0#000；
字体大小：56px；
字体大小：粗体；
颜色：#FFF；
}

我的部门是

<div class="element">Hello Stranger</div>

你好，陌生人

我的输出很模糊，截图如下

下面给出了我试图获得的输出

蓝色的轮廓必须更厚一些，比如说10px或20px

这就是我努力实现的目标

更新

无法使用文本阴影执行此操作。我现在正在尝试下面链接给出的cavas方法

但厚度似乎仍然是个问题，我将线宽调整为10，它只是

---

没用。。。。画布中可能存在其他选项。如果有人知道，请提供帮助。

不幸的是，如此大的笔划在文本阴影中永远不会好看。有文本笔划，但仅使用-webkit前缀（不适用于IE或Opera），您可以查看我的演示：

---

您想要的笔划将大于字母间距，这使得纯CSS无法实现。如果可能的话，可以将其作为图像或更少的笔划？

虽然

-webkit text stroke

仍然是功能，不推荐用于生产，但在所有现代浏览器中都有。 要使边缘更柔和，可以添加多个模糊半径等于文本笔划宽度0.5的阴影。此外，对于IE和Opera Mini来说，这也足够好了（参见代码片段）

@导入url（“https://fonts.googleapis.com/css?family=Permanent+标记和显示=交换“；
p{
字体系列：无衬线；
字号：80px；
线高：80px；
颜色：#eee；
}
.p1{
字体系列：“永久标记”；
}
.p2{
字体系列：无衬线；
字号：700；
}
.中风{
文本笔划：6px黑色；/*尚未工作，需要-webkit-*/
-webkit文本笔划：6px黑色；
}
.影子{
文本阴影：0 0 3px黑色、0 0 3px黑色、0 0 3px黑色、0 0 3px黑色、0 0 3px黑色、0 0 3px黑色、0 0 3px黑色、0 0 3px黑色、0 0 3px黑色、0 0 3px黑色、0 0 3px黑色、0 0 3px黑色、0 0 3px黑色
}

文本笔划123 456 789 0
文本笔划123 456 789 0+阴影
文本笔划123 456 789 0
文本笔划123 456 789 0+阴影
回退123 456 789 0
回退123 456 789 0

浏览器支持改进了很多，只有IE和Opera还不支持，请参阅

有一个方便的sass mixin，提供跨浏览器文本笔划，请参阅

---

你能提供你的密码吗please@Tiago我已经更新了我的问题，请检查一下。由于某种原因，提琴对我不起作用。你有它应该是什么样子的图像吗？@Tiago很抱歉耽搁了，我现在已经更新了结果应该是什么样子，基本上我只是想让文本的轮廓更粗一些。仅此而已。我想是的，但如果不能使用文本笔划，那没关系，我在寻找任何可能的解决方案，比如说，我们可以用画布或一些我不知道的方法来做这件事，因为这些文本本质上是动态的。。。

.one {
font-size: 8em;
color:white;
-webkit-text-stroke: 5px white;
-webkit-text-fill-color: black;
}

.two {
font-size: 7em;
font-weight: bold;
text-shadow:
3px 3px 0 #fff, -3px -3px 0 #fff, 3px -3px 0 #fff,
-3px 3px 0 #fff, 0px 0px 0px #fff;
}

@import "~sass-text-stroke/_text-stroke";

p {
  @include text-stroke(4, #369);
}