11

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

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

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

4

2 に答える 2

17

JavaScriptでこれを行うには、ドキュメントをトラバースするだけspanで、属性を持つ要素内の任意の数字のシーケンスをラップし、CSSでclass宣言することができます。font-family

原則として純粋なCSSでも可能ですが、現在WebKitブラウザーのみがこれをサポートしています。

@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; }

最後に、そして最も重要なことは、それをしないでください。フォントの数字に不満がある場合は、そのフォントを使用しないでください。

于 2012-11-28T18:14:54.357 に答える
1

<span class="number">数字を音で囲むことは、意味的に適切なアプローチのようです。

実際、CSS3は代替手段を提供しておらず、CSS4で今後何も予定されていません。最新のCSS3推奨事項を見ると、コンテンツセレクターは指定されていませんが、古い2001候補の推奨事項が疑似クラスを提供する最後のバージョンでした:contains()。

これにより、数字を含む要素を照合できます。

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

これが実際に利用可能であったとしても、それpは数ではなく、と一致するので、全体pがスタイリングされます...あなたが望むものではありません。CSSWGは、数値コンテンツをフォーマットするためのこれらのアイデアを開始しています...それでもあなたが望んでいたものではありません。

CSSを数値に適用するために、追加のマークアップを回避することはできません。

于 2012-11-28T18:36:41.350 に答える