CSSを使用したオールキャップフォントの偽の大文字化

Question

はすべて大文字である唯一の文字の種類を、持っているフォントに偽小文字にそれは可能ですか？

これは、スタックオーバーフロー上の文です。

フォントが適用されたときに次のようになります。

これは、スタックオーバーフローON文です。

大文字を次の例のように少し大きめにします。しかし、追加のHTMLマークアップはありません。

body { 
 
    font-family: Arial, sans-serif; 
 
    font-size: 12px; 
 
} 
 

 
span { 
 
    font-size: 1.4em; 
 
}

<span>T</span>HIS IS A SENTENCE ON <span>S</span>TACK <span>O</span>VERFLOW

Answer 1

私はこれを達成するための最良の方法ではJavaScript（あなたがダイナミックなマークアップを保つことができる）であると思います。

function smallCaps() { 
    var elements = document.querySelectorAll('.small-caps') 

    Array.prototype.forEach.call(elements, function(e) { 
    var text = e.innerHTML.toUpperCase() 
    e.innerHTML = text.replace(/\b([A-Za-z0-9])/g, '<span class="caps">$1</span>') 
    }) 
} 

も.capsクラスのスタイルを追加することを忘れないでください：あなたが必要があると思いJSの部分は、この（あなたのテキスト要素に.small-capsクラスを追加することを忘れない）である

.caps { 
    font-size: 1.4em; 
} 

はそれを参照してください。

smallCaps() 
 

 
// This is what you need: 
 
function smallCaps() { 
 
    var elements = document.querySelectorAll('.small-caps') 
 

 
    Array.prototype.forEach.call(elements, function(e) { 
 
    var text = e.innerHTML.toUpperCase() 
 
    e.innerHTML = text.replace(/\b([A-Za-z0-9])/g, '<span class="caps">$1</span>') 
 
    }) 
 
}

.caps { 
 
    font-size: 1.4em; 
 
}

<h1 class="small-caps">HELLO WORLD</h1> 
 
<h2 class="small-caps">Nifty FOOBAR title</h2>

： fiddle以下のいずれかで行動 font-variant: small-capsで

Answer 2

文ケース。 titleCase()関数は、<span>sにラップされた文字で完全に機能します。

大文字を次の例のように少し大きめにします。しかし、追加のHTMLマークアップはありません。

OPの最初の4つのコメントは正しいです。

が

のみ文の最初の文字や単語をターゲットにすることができ、CSS、それ以外のあなたがそうでなければ、CSSを使用すると、最初の文字をしたい知っているだろうか、その後、余分なHTMLが必要になります：私はピートのコメント@再確認したいのですがスタックのオーバーフロー？

こうして、さまざまな種類の回答が得られます。それぞれの成功した回答には、何らかの形でマークアップが付いています。 JavaScriptを使用すると、ホワイトリスト/ディクショナリで範囲を決めることができますが、固有名詞の範囲は非常に限られています。その大きさの能力はPython、Java、C/C++などの言語で可能でなければなりません。

デモ

var main = document.body; 
 
var text = main.textContent; 
 
titleCase(text); 
 
main.style.fontVariant = 'smallCaps'; 
 

 
function titleCase(str) { 
 
    return str.replace(/\w\S*/g, function(txt) { 
 
    return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase(); 
 
    }); 
 
}

body { 
 
    font-family: Arial, sans-serif; 
 
    font-size: 12px; 
 
} 
 

 
span { 
 
    font-size: 1.4em; 
 
}

<span>T</span>HIS IS A SENTENCE ON <span>S</span>TACK <span>O</span>VERFLOW