Czy mogę użyć tylko CSS do zmiany koloru i rozmiaru czcionki pierwszej litery każdego słowa?

Question

Jak w tytule pytania, czy możliwe jest zmienienie koloru i rozmiaru czcionki pierwszej litery każdego słowa. Na przykład, jak na poniższym rysunku:

to możliwe, aby to zrobić z tylko CSS? Mogę używać jQuery, ale tylko wtedy, gdy nie jest to możliwe z czystym rozwiązaniem CSS lub CSS3.

Answer 1

Można produkować tekst w małych czapki z każdym słowem kapitalizowane według tej CSS:

h1 { 
    font-variant: small-caps; 
    text-transform: capitalize; 
} 

Ale nie będzie w stanie zmienić kolor liter początkowych stosując sam CSS; będziesz musiał użyć jQuery, aby dodać do tekstu elementy span, a następnie nadać im styl. Coś takiego:

$('h1').html(function() { 
    // Very crude regex I threw together in 2 minutes 
    return $(this).text().replace(/\b([a-z])/gi, '<span class="caps">$1</span>') 
}); 

Dzięki tej CSS:

h1 { 
    font-variant: small-caps; 
    text-transform: capitalize; 
} 

h1 .caps { 
    color: red; 
} 

Answer 2

Użyj psedo-elementowa :first-letter, jak:

.word:first-letter 
{ 
    font-size:200%; 
    color:#8A2BE2; 
} 

Jak tłumaczy komentarz, to musi każde słowo, aby być w własny element, np. <span>

Ale to jest bardziej zbliżone do tego, co OP chce w czystym CSS.

Answer 3

JSFiddle

Proszę bardzo -

<p class="each-word">First letter of every word is now red!</p> 

.first-letter { 
    color: red; 
    } 

window.onload = function(){ 
    var elements = document.getElementsByClassName("each-word") 
    for (var i=0; i<elements.length; i++){ 
    elements[i].innerHTML = elements[i].innerHTML.replace(/\b([a-z])([a-z]+)?\b/gim, "<span class='first-letter'>$1</span>$2") 
    } 
} 

Answer 4

HTML

<h1>The title of this page goes here</h1>​ 

JQuery

$(document).ready(function() { 
var words = $('h1').text().split(' '); 
var html = ''; 
$.each(words, function() { 
    html += '<span style="font-size:200%">'+this.substring(0,1)+'</span>'+this.substring(1) + ' '; 
    }); 
    $('h1').html(html); 
});​ 

JSFIDDLE