使用css跨浏览器文本轮廓厚度 [英] cross browser text outline thickness using css

问题描述

我需要提供文字大纲。这些文字可以说是：例如：可以是像Barclays Premier League，National Football League等联盟名称。

Am in a need to provide outlines for text. These text say for eg: can be League name like Barclays Premier league, National Football League etc.

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

The closest i came with cross browser support is from the link below

https ：//www.alphachannelgroup.com/almost-cross-browser-text-stroke-outline-text/

但我需要粗略的轮廓可以在10到20像素之间变化，

but i would need thickness of outline that can vary between 10 - 20 pixels,

正在努力做到这一点。请帮助

which am struggling to do. Please help

这就是我做的事情

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

我的输出模糊，屏幕截图如下所示。

and my output is blurry the screenshot is given below.

http://screencast.com/t/v9WPv9saYoS

我试图得到的输出在下面给出

the output am trying to get is given below

http://screencast.com/t/lMe1bubFht

蓝色的轮廓必须更厚我说10px或20px

the outline which is in color blue must be more thicker for me say 10px or 20px

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

thats what am trying to achieve.

UPDATE

没有使用文字阴影。我现在正在尝试使用以下链接的cavas方法

failing to do so with text-shadows. am now trying cavas methods given link below

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

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

but still the thickness seems a problem i adjusted lineWidth to 10 and well it just

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

didnt work.... may be there exists some other option in canvas..if someone knows plese help.

推荐答案

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

For blurred outline you can always use the same text-shadow many times for better result. At least this works on all browsers ;)

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

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

这篇关于使用css跨浏览器文本轮廓厚度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！