仅具有轮廓的字体系列的颜色

Question

我的字体只有轮廓。它没有任何填充颜色。在这里你可以看到这个。

http://www.dafont.com/comica-bd.font

我在我的网页（fontface）中使用此字体。当我改变字体的颜色时，它的轮廓会改变。 有没有办法使用CSS更改填充颜色？或者是我最后一个使用图像的选项？

这就是我想要的：

这就是我用CSS和fontface做的事情。

任何填充背景或其他内容的CSS属性。？

Answer 1

不，没有办法填写css中的字体。为css目的，空格不能被视为字体的一部分。

Answer 2

**编辑 - 我没有在其他浏览器中检查过这个。这是一个相当重要的实现。我不建议做这样的事情。 **

此解决方案使用HTML5，CSS3，因此具有一些浏览器支持条件。

请参阅此codepen http://codepen.io/keithwyland/pen/tbfcE（如果codepen不起作用，请参阅下面的代码）

我使用了Google Web字体Jacques Francois Shadow（http://www.google.com/webfonts）和它的姐妹字体Jacques Francois。基本上，阴影字体的轮廓字体与您正在使用的字体相似。另一种字体是相同但不是轮廓，它已填写。

我所做的是设置一个data-attribute来重复元素的文本，然后在CSS中使用它。我也使用伪元素来吐出该数据属性的值。它并不完美（主要是间距），但如果您的第二个字体可以具有与原始字体完全相同的字母宽度并且只是填充而不是轮廓，那将会有所帮助。

CSS

@import url(http://fonts.googleapis.com/css?family=Jacques+Francois+Shadow);
@import url(http://fonts.googleapis.com/css?family=Jacques+Francois);

body {
    background-color: red;
    font-family: 'Jacques Francois Shadow', cursive;
    color: #000;
    font-weight: bold;
}

h1 {
    position: relative;
    word-spacing: 2px;
    font-size: 300%;
  z-index: 1;
}

h1:after {
    font-family: 'Jacques Francois', cursive;
    content: attr(data-ttl);
    position: absolute;
    color: blue;
    top: 0;
    left: 0;
  letter-spacing: 0.06em;
    word-spacing: -0.055em;
  text-shadow:  1px 0 blue;
  z-index: -1;
}

p {
  font-size: 300%;
}

HTML

<h1 data-ttl="Stuff with fill">Stuff with fill</h1>
<p>No fill</p>