使用CSS跨浏览器文本轮廓粗细

Question

我需要提供文本大纲。这些文字表示例如：可以是联赛名称，如巴克莱超级联赛、国家橄榄球联盟等。

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

https://www.alphachannelgroup.com/almost-cross-browser-text-行程-outline-text/

但我需要轮廓的厚度可以在 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>

我的 div 是

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

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

http://screencast.com/t/v9WPv9saYoS

我试图获得的输出如下所示

http://screencast.com/t/lMe1bubFht

蓝色的轮廓对我来说必须更粗，比如10px或20px

这就是我想要实现的目标。

更新

无法使用文本阴影来做到这一点。我现在正在尝试下面给出的链接中的卡瓦斯方法

http://www.html5canvastutorials.com/tutorials/html5-canvas-text-中风/

但厚度似乎仍然是一个问题，我将 lineWidth 调整为 10，好吧

不起作用....画布中可能存在其他选项..如果有人知道请帮助.

Answer 1

虽然

-webkit-text-stroke

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

@import url("https://fonts.googleapis.com/css?family=Permanent+Marker&display=swap");
p {
  font-family: sans-serif;
  font-size: 80px;
  line-height: 80px;
  color: #eee;
}
.p1 {
  font-family: "Permanent Marker";
}
.p2 {
  font-family: sans-serif;
  font-weight: 700;
}
.stroke {
  text-stroke: 6px black; /* doesn't work yet, requires -webkit- */
  -webkit-text-stroke: 6px black;
}
.shadow {
  text-shadow: 0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black
}

<p class="p1 stroke">Text-Stroke 123 456 789 0</p>
<p class="p1 stroke shadow">Text-Stroke 123 456 789 0 + Shadow</p>
<p class="p2 stroke">Text-Stroke 123 456 789 0</p>
<p class="p2 stroke shadow">Text-Stroke 123 456 789 0 + Shadow</p>
<p class="p1 shadow">Fallback 123 456 789 0</p>
<p class="p2 shadow">Fallback 123 456 789 0</p>

Answer 2

不幸的是，这么大的笔划在文本阴影下永远不会好看。有文字描边，但只能使用 -webkit 前缀（不适用于 IE 或 Opera），你可以查看我的演示：

http://jsfiddle.net/hmyXX/

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

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

Answer 3

浏览器支持改进很多，只有 IE 和 Opera 还不支持，参见：https://caniuse.com/#feat=text-中风

有一个方便的 sass mixin，它提供跨浏览器的文本描边，请参阅 https://github.com/hudochenkov/sass-text-中风 .

@import "~sass-text-stroke/_text-stroke";
    
p {
  @include text-stroke(4, #369);
}