Вот еще одна идея с mix-blend-mode
, где вы, вероятно, будете иметь лучшую поддержку, чем text-fill
и text-stroke
, но вам придется дублировать текст:
.text {
font-family: 'Roboto', sans-serif;
font-size:50px;
font-weight: bold;
position:relative;
display:inline-block;
letter-spacing:4px;
}
.text::before,
.text::after {
content:attr(data-text);
}
.text::before {
color:red;
position:relative;
/*offset the red text*/
top:3px;
left:3px;
}
.text::after {
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
color:#fff; /*use white*/
/*create the stroke around text*/
text-shadow:
1px 0 0 #000,
0 1px 0 #000,
1px 1px 0 #000,
-1px 0 0 #000,
0 -1px 0 #000,
-1px -1px 0 #000,
-1px 1px 0 #000,
1px -1px 0 #000;
mix-blend-mode: darken; /*means that white on red will give red! */
}
<link href="https://fonts.googleapis.com/css?family=Roboto:900" rel="stylesheet">
<div class="text" data-text="LEARN TO CODE"></div>