ページ上のすべての数字に固有のフォントを設定します

Question

私のウェブページでは、すべての文字に対してうまく機能するフォントを選択しました。しかし、すべての数字について、私は別のフォントを使用したいと思います。

CSSルールを設定してページ上のすべての数字をターゲットにする方法はありますか？

CSSで厳密に行うことができない場合は、最初に正規表現を使用して「数字」クラスのスパンですべての数字を囲み、そのクラスのフォントを適用します。これを行うより良い方法はありますか？

Answer 1

あなたはclass属性でspan要素の桁の任意のシーケンスをラップし、CSSでそれをfont-familyを宣言するように、文書をトラバースすることにより、比較的簡単にJavaScriptでそれを行うことができます。最後に

@font-face { 
    font-family: myArial; 
    src: local("Courier New"); 
    unicode-range: U+30-39; 
} 
@font-face { 
    font-family: myArial; 
    src: local("Arial"); 
    unicode-range: U+0-2f, U+40-10FFFF; 
} 
body { font-family: myArial; } 

、そして最も重要なのは、それをしない：

それだけでWebKitのブラウザは、現在この機能をサポートしていますが、あまりにも、純粋なCSSで、原理的には可能です。フォントの数字に不満がある場合は、そのフォントを使用しないでください。

Answer 2

番号を<span class="number">で囲むことは、良い、意味論的なアプローチのように聞こえる。

実際、CSS3は代替手段を提供していません。CSS4には何も表示されません。 latest CSS3 recommendationを見ると、コンテンツセレクタは指定されていませんが、古い2001 candidate recommendationが疑似クラス:contains()を提供する最後のバージョンでした。

これあなたが数字を含ん要素にマッチさせます：

/* Deprecated CSS3 */ 
p:contains(0), p:contains("1"), p:contains("2") { 
    background-color: red; 
} 

これは、実際に利用可能であったとしても、それは数、pにない一致するので、全体pがスタイリングされるだろう...ではないものをあなたは欲しかった。 CSSWGは数値コンテンツの書式設定のためにthese ideasを蹴っています...あなたが望むものではありません。

CSSを数字に適用するには、追加のマークアップを避ける必要はありません。