CSS中的发光文字+文字轮廓（已使用文字阴影进行发光）

Question

所以我打了一堵砖墙。我正在为一些文本使用关键帧发光，但我也需要应用文本轮廓。这在CSS中是否可行？

请参阅附件。文字是绿色的，所以找到一种颜色来补充它是很难的。我在Excel中演示了一些内容并找到了我喜欢的内容，但不确定如何在CSS中重新创建它。

这就是我想要的：

http://www.flickr.com/photos/68814612@N05/8560198200/

这是我目前使用的代码：

.metric {
    font-size: 240%;
    font-family:Arial Narrow;
    font-weight:700;
    color:#138200;

    text-shadow: -1px -1px 0 #92d050, 1px -1px 0 #92d050, -1px 1px 0 #92d050, 1px 1px 0 #92d050;
    -webkit-animation-name: glow;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}


@-webkit-keyframes glow {

    0% { text-shadow: 0 0 4px green; }
    50% {text-shadow: 0 0 20px rgba(19,130,0, 0.5), 0 0 20px rgba(19,130,0, 0.5), 0 0 20px rgba(19,130,0, 0.6),0 0 15px rgba(19,130,0, 0.6) ;}
    100% { text-shadow: 0 0 4px green; }
        }

Answer 1

仅仅为了子孙后代，以下是我对杰夫上述提案的回应：

http://jsfiddle.net/Osceana/cNYZa/

HTML：

<div id="Percentage">
    <div class="metric">98.3%</div>
    <div class="metric2">98.3%</div>
</div>

然后我只在CSS中设置关键帧发光：

.metric {
    position: absolute;

    font-size: 37pt;
    font-family:Segoe UI Light;
    color:#138200;

    text-shadow: -1px -1px 0 #92d050, 1px -1px 0 #92d050, -1px 1px 0 #92d050, 1px 1px 0 #92d050;
    -webkit-animation-name: glow;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}


@-webkit-keyframes glow {

    0% { text-shadow: 0 0 20px rgba(19,130,0, 0.7); }
    50% {text-shadow: 0 0 20px rgba(19,130,0, 0.7), 0 0 20px rgba(19,130,0, 1), 0 0 20px rgba(19,130,0, 1),0 0 20px rgba(19,130,0, 1),0 0 20px rgba(19,130,0, 1),0 0 20px rgba(19,130,0, 1), 0 0 30px rgba(19,130,0, 1);}
    100% { text-shadow: 0 0 20px rgba(19,130,0, 0.5)/*0 0 4px green*/; }
        }


.metric2 {
    position:absolute;

    font-size: 37pt;
    font-family:Segoe UI Light;
    color:#138200;

    text-shadow: -1px -1px 0 #92d050, 1px -1px 0 #92d050, -1px 1px 0 #92d050, 1px 1px 0 #92d050;

}