使用CSS，有什麼方法可以使用不同的字體顯示不同的字符？

我的HTML文本只是這樣的：使用CSS，有什麼方法可以使用不同的字體顯示不同的字符？

<p>abcdefghijklmnopqrstuvwxyz</p>

我想要的是顯示一個使用「宋體」，用「宋體」顯示盎司，這應該使用CSS，比如說來完成，不改變HTML文本。

簡單地說，我想CSS自動選擇指定的字體對應的是哪個字符。
應使用「Times New Roman」顯示a-n;
o-z使用「新快訊」顯示。

有什麼辦法可以做到這一點？

如果可以解決此問題，則可以解決另一個問題：使用不同的字體顯示不同的語言。

來源

2012-04-05 Yishu Fang

貌似可以，在某些瀏覽器至少，使用一種叫unicode-range韋爾，這工程在Chrome中，而令人驚訝的是，IE。 Firefox和Opera沒有這樣的運氣。

順便說一句，這個從http://24ways.org/2011/unicode-range

活生生的例子更多的信息：http://jsfiddle.net/jfcox/3LQyr/

<style> 
@font-face { 
    font-family: Foobar; 
    src: local('Times New Roman'); 
    unicode-range: U+61-6E; 
} 
@font-face { 
    font-family: Foobar; 
    src: local('Arial'); 
    unicode-range: U+6F-7A; 
} 
body{ 
    font-family:Foobar; 
} 
</style> 
<p>abcdefghijklmnopqrstuvwxyz</p>

來源

2012-04-05 03:13:33 JayC

哎呀，不是字體問...我給你一個JSFiddle亂七八糟:-P – JayC 2012-04-05 03:15:00

非常感謝。最近將來所有瀏覽器都支持該功能嗎？ – 2012-04-05 03:41:16

2011年10月4日的W3C工作草案（http://www.w3.org/TR/css3-fonts/）也提到了它，所以有人試圖使其成爲標準。 *它會成爲一個標準嗎？當然，這是另一個問題，我無法預測未來，但我可以稱之爲一個很好的指示。 – JayC 2012-04-05 13:49:19

您不能使用CSS來更改特定字符的字體，因爲CSS選擇器不會選擇單個字符 - 它們會選擇HTML元素。

所以你需要圍繞需要特定字體的文本塊創建元素。理想情況下，您可以在服務器端代碼中執行此操作，但我不知道這對您是否實用。你的服務器將需要輸出HTML這樣的：

<p><span class="languageOne">abcdefghijklmn</span><span class="languageTwo">opqrstuvwxyz</span></p>

然後你申請的字體作爲適當的在你的CSS：

.languageOne { font-family: "Times New Roman", serif; } 
.languageTwo { font-family: "Courier New", monospace; }

來源

2012-04-05 02:57:40 gutch

我知道這種方式，但我只是希望CSS做到這一點，而不是HTML，或者HTML文本看起來很醜，但是謝謝你們。這是一個小型靜態網站，我自己編寫所有HTML文本。 :) – 2012-04-05 03:12:22

有時候，Web開發的現實是，爲了讓事情順利進行，你必須接受一些醜陋！ :-) – gutch 2012-04-05 05:08:36

如果人物屬於不同的書寫系統，如拉丁語和希伯來語，或西裏爾字母和希臘，瀏覽器通常會自動爲他們使用不同的字體。但是，這隻發生在頁面未指定字體的範圍內，即僅與默認字體相關，並且所使用的字體由用戶控制的瀏覽器默認設置和瀏覽器設置確定。

雖然JayC的回答中描述的技術提供了部分解決方案，但您可以通過區分標記中不同語言的文本來獲得更好的瀏覽器覆蓋率。在雙語文檔中，對其中一個文本使用標記就足夠了（出於實際原因，使用較少的文本）。在gutch的答案中使用class可以提供最好的覆蓋率，但是現在對CSS中的語言選擇器的支持非常廣泛，您可能會考慮使用更合理的lang屬性。

<h1>Hello − <a lang=ru>Привет</а></h1>

那麼你可以使用規則像

[lang=ru] { font-family: ...; }

（我的例子有效地使用了<a>元素的<span>較短的變體。形式上，只有當文本不在外部<a>元素內時纔有可能。）

但是，對於視覺樣式，只需要按語言選擇字體的相反方式。如果「Hello」中的「e」與同一行中的「Привет」中的Cyrillic「е」不同，那看起來很奇怪。如果可能的話，對文檔中的所有語言使用相同的字體幾乎總是更好。這意味着選擇適用於所有人的字體。

來源

2012-04-05 04:33:41

使用CSS，有什麼方法可以使用不同的字體顯示不同的字符？

回答

相關問題