專門爲頁面上的所有數字設置字體

對於我的網頁，我選擇了適用於所有字母的字體。但是，對於所有數字，我想使用不同的字體。專門爲頁面上的所有數字設置字體

有沒有一種方法可以設置CSS規則來定位頁面上的所有數字？

如果我不能嚴格使用CSS，我的第一個想法是使用正則表達式來將所有數字用一個「數字」類來包圍，併爲該類應用一種字體。有一個更好的方法嗎？

來源

2012-11-28 dmr

我不知道這是否有用，但看看它。 http://johndoesdesign.com/blog/2012/jquery/targeting-a-specific-word-using-javascript-and-jquery/ –

你可以像你所描述的那樣用JavaScript來完成它，或者你可以創建一個自定義字體通過用「數字」字體中的數字字形替換「字母」字體中的數字字形。 – thirtydot

你可以通過讓你包的任何數字序列中的span元素與class屬性和CSS聲明font-family它遍歷文檔中的JavaScript做相對簡單。

有可能在原則上純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-28 18:14:54

我在'unicode-range'上籤出了[CSS3 Font spec]（http://www.w3.org/TR/css3-fonts/#unicode-range-desc）......很有趣。 – Anson

這是很好的解決方案。你能幫我嗎？我可以這樣使用： @ font-face { font-family：myArial; src：local（「Times New Roman」，Times，serif）; unicode範圍：U + 30-39; } – zenon

用<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應用於數字，沒有避免一些額外的標記。

來源

2012-11-28 18:36:41 Anson

專門爲頁面上的所有數字設置字體

回答

相關問題