CSS - 虚线颜色字体

Question

我必须在网页上显示如下文字：

字体有两种替代颜色。它甚至可能吗？该解决方案应适用于所有浏览器。

Answer 1

是的，如果您的页面中包含适当的字体文件，则可以使用。

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

Answer 2

这可以在CSS中原生使用，而不使用Google Chrome和使用-webkit-background-clip的其他WebKit浏览器中的自定义字体。

＆＃13;

＆＃13;

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;
}

＆＃13;

<h1>Your text here</h1>

＆＃13;

＆＃13;

＆＃13;

请注意，这只会在其他浏览器（如Firefox或IE）的矩形条纹背景前显示为文本。

This article解释了-webkit-background-clip以及其他浏览器的一些后备内容。

This article解释了在纯CSS3中制作条纹背景。