CSS：使用不同字體設計數字和文本

我希望我網站中的所有數字和所有標點符號都有一個字體系列，而其他文本則有另一個。（例如：Arial中的數字和標點符號以及Tahoma中的文字）CSS：使用不同字體設計數字和文本

我可以爲他們每個人做，但他們是很多人，所以這不是一種選擇。

有沒有更簡單的方法？

2014-10-29 Bonno

無法在CSS中完成， – Nick 2014-10-29 10:36:04

如果您使用字體編輯器並創建了一個新的字體，其中的點/數字是宋體，文本是tahoma，然後從中創建webfonts並將其用作正文字體？ – passatgt 2014-10-29 10:41:14

其實它可以使用'unicode-range'，但我不會，因爲它仍然是實驗 - https://developer.mozilla.org/en-US/docs/Web/CSS/unicode-range – 2014-10-29 10:41:46

最好的方法是創建2個類，一個是Arial，另一個是Tahoma。然後根據你想要的元素進行排序。

來源

2014-10-29 10:37:34

您可以爲您的body（即Tahoma）設置一個font-family，然後在<span>標記內包裝您的任何數字和標點符號，例如， <span class="numbers"></span>然後設置一個不同的字體家族span標籤使用CSS這樣的：

.numbers { 
    font-family: Arial; 
}

下面是一個例子：

body { 
 
    font-family: Arial; 
 
} 
 
.numbers { 
 
    font-family: Tahoma; 
 
    color: red; 
 
}

Lorem ipsum dolor ismet. Lorem ipsum dolor ismet. Lorem ipsum dolor ismet <span class="numbers">123-456-789</span>. Lorem ipsum dolor ismet. Lorem ipsum dolor ismet. Lorem ipsum dolor ismet. Lorem ipsum dolor ismet. Lorem ipsum dolor ismet. Lorem ipsum 
 
dolor ismet. Lorem ipsum dolor ismet. <span class="numbers">"</span>Lorem ipsum dolor ismet<span class="numbers">"</span>. Hello World<span class="numbers">???????</span>

來源

2014-10-29 10:37:37

'我可以爲他們每個人做，但他們是很多，所以這不是一個選項。'OP說爲每個數字或標點符號添加跨度不是一個選項。 – Nick 2014-10-29 10:40:13

使用CSS，你必須使用兩個<span>做到這一點，並給每一個不同的字體：

.numbers { 
 
     font-family: Verdana; 
 
    } 
 
    .letters { 
 
     font-family: Arial; 
 
    }

<span class="numbers">4524</span> 
 
<span class="letters">Qwerty</span>

它使用兩個CSS類之一letters，一個用於numbers使用不同的字體。

來源

2014-10-29 10:44:08

在我的情況下，網站已經完成了一半，然後我需要更改整個網站的所有號碼的字體。我需要將所有數字更改爲Oxygen字體。這是我做到的。

/* latin-ext */ 
@font-face { 
    font-family: 'Oxygen'; 
    font-style: normal; 
    font-weight: 400; 
    src: local('Oxygen'), local('Oxygen-Regular'), url(https://fonts.gstatic.com/s/oxygen/v5/LC4u_jU27qpsdszDEgeU_3-_kf6ByYO6CLYdB4HQE-Y.woff2) format('woff2'); 
    unicode-range: U+30-39; 
}

再換成font-family: "Poppins", sans-serif;到font-family: "Oxygen", "Poppins", sans-serif;

新字體家族風格將適用氧氣字體的所有文字，但是我們限制氧氣的字體被應用到僅使用unicode-range 0-9號屬性。對於除數字之外的所有其他文本，將應用Poppins字體。

注意：U + 30-39是0-9數字的範圍。

來源

2016-10-17 14:14:55 vinesh

CSS：使用不同字體設計數字和文本

回答

相關問題