Question

我需要提供文字大纲。这些文字说：例如：可以像巴克莱英超联赛，国家橄榄球联盟等联盟名称。

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

https://www.alphachannelgroup.com/almost-cross-browser-text-stroke-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-stroke/

但仍然厚度似乎是一个问题我将lineWidth调整为10并且它只是

没有工作....可能在画布中存在一些其他选项..如果有人知道很多帮助。

Answer 1

不幸的是，这样一个大笔画对于文字阴影永远不会好看。有文字笔划，但只使用-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 2

对于模糊轮廓，您可以多次使用相同的文本阴影以获得更好的效果。至少这适用于所有浏览器;）

＆＃13;

p {
  font-family: Arial, sans-serif;
  font-size: 40px;
  font-weight: bold;
  color: white;
  }
.p1 {
  text-shadow: black 0 0 10px;
  }
.p2 {
  text-shadow: black 0 0 10px, black 0 0 10px, black 0 0 10px, black 0 0 10px, black 0 0 10px, black 0 0 10px, black 0 0 10px, black 0 0 10px, black 0 0 10px, black 0 0 10px, black 0 0 10px, black 0 0 10px, black 0 0 10px, black 0 0 10px, black 0 0 10px;
  }
.p3 {
  text-shadow: black 0 0 10px, black 0 0 10px, black 0 0 10px, black 0 0 10px, black 0 0 10px, black 0 0 10px, black 0 0 10px, black 0 0 10px, black 0 0 10px, black 0 0 10px, black 0 0 10px, black 0 0 10px, black 0 0 10px, black 0 0 10px, black 0 0 10px, black 0 0 10px, black 0 0 10px, black 0 0 10px, black 0 0 10px, black 0 0 10px, black 0 0 10px, black 0 0 10px, black 0 0 10px, black 0 0 10px, black 0 0 10px, black 0 0 10px, black 0 0 10px, black 0 0 10px, black 0 0 10px, black 0 0 10px, black 0 0 10px, black 0 0 10px, black 0 0 10px, black 0 0 10px, black 0 0 10px, black 0 0 10px, black 0 0 10px, black 0 0 10px, black 0 0 10px, black 0 0 10px, black 0 0 10px, black 0 0 10px, black 0 0 10px, black 0 0 10px, black 0 0 10px, black 0 0 10px;
  }

＆＃13;

<div><p class="p1">Text with one shadow</p>
<p class="p2">Text with bunch of shadows</p>
<p class="p3">Text with maaaaaany shadows</p></div>

＆＃13;

Answer 3

浏览器支持改进了很多，只有IE和Opera还不支持它，请参阅 https://caniuse.com/#feat=text-stroke。

有一个方便的sass mixin提供跨浏览器文本笔划，请参阅 https://github.com/hudochenkov/sass-text-stroke。

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

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

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

3 个答案: