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

Question

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

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

我在我的网页（字体）中使用这种字体。当我改变字体的颜色时，它的轮廓就会改变。有没有办法使用 CSS 来改变填充颜色？还是我使用图像的最后选择？

这就是我要的：

这就是我可以用 CSS 和 fontface 做的。

任何 CSS 属性来填充背景或其他东西。？

Answer 1

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

Answer 2

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

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

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

我使用了 Google Web Font Jacques Francois Shadow (http://www.google.com/webfonts)，它是 Jacques Francois 的姊妹字体。基本上，阴影字体具有与您正在使用的字体一样的轮廓字体。另一种字体相同但不是轮廓，它是填充的。

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