CSS - dashed color font

Question

I have to show the text on webpage which looks like:

The font has two alternate colors. Is it even possible? The solution should work for all the browsers.

Answer 1

Yes, it's possible if you have proper font file that can be included in your page.

@font-face {
    font-family: myFirstFont;
    src: url(dashed_font.woff);
}

Answer 2

This can be done natively in CSS without using a custom font in Google Chrome and other WebKit browsers using -webkit-background-clip.

h1 {
    font-family: sans-serif;
    font-size: 300%;
    background: repeating-linear-gradient(
        135deg,
        #3f3f3f,
        #3f3f3f 2px,
        #7f7f7f 2px,
        #7f7f7f 4px
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

<h1>Your text here</h1>

Note that this will just display as text in front of a rectangular stripy background in other browsers such as Firefox or IE.

This article explains -webkit-background-clip and a few fallbacks for other browsers.

This article explains making striped backgrounds in plain CSS3.