只有轮廓的字体族的颜色

Question

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

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

我正在使用这个字体在我的网页(字体)。当我改变字体的颜色时，它的轮廓就变了。是否有一种方法来改变填充颜色以及使用CSS?还是我最后一种选择使用图像？

这就是我想要的：

​

这就是我可以用CSS和字体来做的。

​

任何CSS属性来填充背景或什么的。？

Answer 1

不，没有办法在css中填充字体。就css而言，空格不能视为字体的一部分。

Answer 2

**编辑-我没有在其他浏览器中检查这个。这是一个相当粗俗的实现。我不建议做这种事。**

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

请参阅此码页 http://codepen.io/keithwyland/pen/tbfcE (如果代码不工作，请参见下面的代码)

我使用过Google雅克弗朗索瓦阴影(http://www.google.com/webfonts)和它的姐妹字体雅克弗朗索瓦。基本上，阴影字体有一个轮廓字体，就像你正在使用的那种。另一种字体是相同的，但不是轮廓，它是填充的。

我所做的是设置一个数据属性来重复元素的文本，然后在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>