顏色已經勾勒只有

Question

我有一個只有輪廓的字體。它沒有任何填充顏色。在這裏你可以看到這個fone。

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

我用我的網頁（fontface）這種字體。當我改變字體的顏色時，它的輪廓被改變了。 有沒有辦法改變填充顏色以及使用CSS？或者是我最後一個使用圖像的選項？

這就是我想要的：

這是我可以用CSS和fontface做。

任何CSS屬性來填充背景什麼的？

Answer 1

沒有，有沒有辦法填補CSS的字體。爲了CSS目的，空格不能被認爲是字體的一部分。

Answer 2

**編輯 - 我沒有在其他瀏覽器中選中此。這是一個非常粗糙的實現。我不會推薦做這樣的事情。 **

此解決方案使用HTML5，CSS3和，同樣地，具有一定的瀏覽器支持的條件。

看到這個codepenhttp://codepen.io/keithwyland/pen/tbfcE（以下如果代碼codepen不工作）

我使用谷歌網頁字體雅克·弗朗索瓦·暗影（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>