CSS/Javascript-使用css3或Javascript复制图像样式（贴纸样式）

您好，有没有人可以给我一些建议，如何将您看到的图像复制成纯css字体+样式

我试着这样做： css

 *{
        font-family: 'Asap', sans-serif;
        font-size:130px;
        color:#444;
        font-weight:bold;
        letter-spacing:-3px;
    }
    body{
        background:url('http://img.ly/system/uploads/007/221/887/large_antani.png') no-repeat left 190px ;
    }
    img{
        width:auto;
        height:auto;
    }
    a{

        text-shadow:
           3px 3px 0 #fff,
         -1px -1px 0 #fff,  
          1px -1px 0 #fff,
          -1px 1px 0 #fff,
           1px 1px 0 #fff,
            0px 2px 2px #ccc, 0px 4px 4px #ccc,0px 6px 6px #ccc;
    }

html

<a>asd</a>

但对我来说最大的问题是，它使文本阴影出现在图像中
谢谢
 我将您的文本阴影更改为：

text-shadow: 0 0 0 20px white, 4px 4px 4px 20px #ccc;

它只适用于支持文本阴影扩散的浏览器（据我所知，这只是IE10），但它更接近图像中的效果

不幸的是，文本颜色不可能从浅蓝色渐变到稍深蓝色，因此您必须选择最适合自己的纯色

当然，对于跨浏览器兼容的解决方案，图像是最好的选择。
我个人认为，在这种情况下，您应该选择图像。当然，对于这样一个简单的png，在我看来是不值得的，而且您将获得最好的跨浏览器支持。我还相信，当涉及到徽标时，您需要完全的跨浏览器兼容性。它定义了你的品牌，也是人们识别你的方式，因此不允许有任何变化

如果您坚持“编码”您的徽标，我认为您应该选择svg以获得最接近的匹配。我可能会复制Illustrator中的徽标（如果您还没有），然后将其保存为svg。将其集成到网页中应该很容易…

需要重复的锚定，因为
-webkit背景剪辑：透明在对文本产生渐变效果时也会剪裁阴影。是的，这与cross borwser不兼容

HTML:

<div class="replica">
    <a class="link">asd</a>
    <a class="shadow">asd</a>
</div>

如果您想变得疯狂，可能会减慢速度，可以使用jquery为每个角度创建文本阴影

按照这个来试一下

我只是做了一些jquery来为每个特定的角度生成一个阴影。。。这是缓慢的，我相信更糟的是，更多的元素。。。但它在那里

function stroke(thisEle) {
    var spread = 10; // how far you want the stroke to be
    var shadows = []; //Start an array for every textshadow
    for(var i = 0; i <= 361; i++){ //For every angle
        var angle = i;
        var pointX = spread*(Math.sin(angle)); //find the direction 
        var pointY = spread*(Math.cos(angle)); //of the text shadow
        if(i == 361){ //Give one last text shadow that is black underneath
            var shadow = '20px 20px 20px black'; 
        } else {
            var shadow = pointX + 'px ' + pointY + 'px 0 white';
        }
        shadows.push(shadow); //Add this shadow to the array
    }

    thisEle.css({
        textShadow: shadows //show all shadows (SLOW)
    });
}

$('a').each(function(){ //for each - do everything above
    var thisEle = $(this);
    stroke(thisEle);  
});

功能冲程（thisEle）{
var spread=10；//希望笔划有多远
var shadows=[]；//为每个textshadow启动一个数组
对于（var i=0；i+1非常感谢，我将等待其他答案，同时我发现一些很酷的js用于文本渐变，因此我认为最后我将使用js进行渐变，主要问题是图像笔划+阴影，：p这对我来说似乎非常棘手。当然，这是可行的，但代价是添加了大量额外节点-在任何具有大型r如果内容太多，可能会在浏览器中造成问题。请自行承担使用风险。+1对于svg，当然可以使用图像，但如果我的字体大小为300px会怎么样？：）我需要一个巨大的png:）））不是。你试过了吗？png是一种压缩格式，并且具有如此“简单”的图像（例如与照片相比）文件大小应该是可以接受的，即使是300px字体。不，需要尝试：）谢谢你的建议，SVG跨浏览器兼容吗？我不会给IE8或更小版本的版本打f**；）这很酷，我想知道是否有可能让它更接近，无论如何我需要让它跨浏览器兼容，所以我想我不能使用你（很棒）的解决方案：（好吧，你需要跨浏览器的备选方案/后备方案来实现
-webkit text-fill-color:transparent；
和
-webkit-background-clip:text；
的兼容。你知道这些备选方案是什么吗？：据我所知，目前还没有任何备选方案。我发现了一些可能的东西，你认为这在你的代码中有效吗？太棒了，我编辑了你的影子，现在看起来更近了：），谢谢！
function stroke(thisEle) {
    var spread = 10; // how far you want the stroke to be
    var shadows = []; //Start an array for every textshadow
    for(var i = 0; i <= 361; i++){ //For every angle
        var angle = i;
        var pointX = spread*(Math.sin(angle)); //find the direction 
        var pointY = spread*(Math.cos(angle)); //of the text shadow
        if(i == 361){ //Give one last text shadow that is black underneath
            var shadow = '20px 20px 20px black'; 
        } else {
            var shadow = pointX + 'px ' + pointY + 'px 0 white';
        }
        shadows.push(shadow); //Add this shadow to the array
    }

    thisEle.css({
        textShadow: shadows //show all shadows (SLOW)
    });
}

$('a').each(function(){ //for each - do everything above
    var thisEle = $(this);
    stroke(thisEle);  
});