You can produce text in small caps with every word capitalized using this CSS:
h1 {
font-variant: small-caps;
text-transform: capitalize;
}
But you won't be able to change the color of the initial letters using CSS alone; you're going to have to use jQuery to add span
elements to your text then style those elements. Something like this:
$('h1').html(function() {
// Very crude regex I threw together in 2 minutes
return $(this).text().replace(/([a-z])/gi, '<span class="caps">$1</span>')
});
With this CSS:
h1 {
font-variant: small-caps;
text-transform: capitalize;
}
h1 .caps {
color: red;
}
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…