CSS - 虚线颜色字体

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.