CSSを使用すると、異なるフォントを使用して異なる文字を表示する方法はありますか？

Question

私のHTMLテキストはちょうどこのようなものです：

<p>abcdefghijklmnopqrstuvwxyz</p> 

私が欲しいの使用「のTimes New Roman」を表示し、「宅配便新しい」を使用してオンスを表示することであり、これは、たとえば、CSSを使用して行われるべきですHTMLテキストに変更はありません。

簡単に言えば、私はCSSにを自動的に入力します。は、それがどの文字に対応するかを指定します。
a-nは「Times New Roman」を使用して表示する必要があります。
o-z shouleは、「Courier New」を使用して表示されます。

これを行う方法はありますか？

この問題を解決できる場合、異なるフォントを使用して異なる言語を表示するという別の問題を解決できます。

Answer 1

はunicode-rangeと呼ばれるものを使用して、少なくとも一部のブラウザでは、ルックスあなたのサーバーは、このようにHTMLを出力する必要があるだろうWelll、これは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>​ 

Answer 2

CSSセレクタは個々の文字を選択しないため、HTML要素を選択するため、CSSを使用して特定の文字のフォントを変更することはできません。

したがって、特定のフォントが必要なテキストブロックの周りに要素を作成する必要があります。理想的には、サーバー側のコードでそれを行いますが、それはあなたにとって実用的かどうかわかりません。そして、あなたはCSSで適切にフォントを適用する

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

：あなたができるように

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

Answer 3

文字は、ラテン語やヘブライ語、またはキリル文字やギリシャなど異なる書記体系に属している場合は、自動的に頻繁にブラウザそれらのために異なるフォントを使用してください。しかし、これはページがフォントを指定していない、つまりデフォルトフォントのみに関連し、使用されるフォントはユーザーが制御するブラウザのデフォルトとブラウザ設定によって決まる程度にしか起こりません。

JayCの答えに記載されている手法では部分的な解決策が得られますが、マークアップでさまざまな言語のテキストを区別することで、ブラウザのカバレッジが向上します。バイリンガルな文書では、それらのうちの1つのテキストにはマークアップを使用すれば十分です（実用的な理由から、これを少なくしたもの）。例えば、classをgutchの回答と同じように使用すると、最も効果的ですが、現在ではCSSの言語セレクタが広く普及しているため、より論理的なlang属性を使用することを検討する可能性があります。

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

次に、あなたは（私の例では、<span>の短いバリアントとして効果的に<a>要素を使用しています

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

のようなルールを使用します。正式には、テキストが外側の<a>要素の内部にない場合にのみ可能です。

ただし、ビジュアルスタイルでは、言語によるフォント選択の反対が必要になります。 "Hello"の "e"が同じ行の "Привет"のキリル文字 "е"と異なる場合、実際には奇妙に見えます。可能であれば、ドキュメント内のすべての言語に同じフォントを使用することが、ほとんど常に良い方法です。これは、すべてのフォントに対応するフォントを選択することを意味します。