6

私のHTMLテキストは次のようなものです：

<p>abcdefghijklmnopqrstuvwxyz</p>

私が望むのは、「Times New Roman」を使用して表示し、「Courier New」を使用して oz を表示することです。これは、HTML テキストを変更せずに CSS を使用して行う必要があります。

簡単に言えば、CSS に、その文字に対応する指定されたフォントを自動的に選択してもらいたいのです。
「Times New Roman」を使用して表示する必要があります。
oz は「Courier New」を使用して表示する必要があります。

これを達成する方法はありますか？

この問題を解決できれば、別の問題を解決できます。別のフォントを使用して別の言語を表示することです。

4

3 に答える 3

9

はい、できunicode-range ます。最新のすべての Web ブラウザで動作します: https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face

ところで、これについての詳細は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-05T03:13:33.250 に答える
3

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

JayC の回答で説明されている手法は部分的な解決策ですが、マークアップでさまざまな言語のテキストを区別することで、ブラウザーのカバレッジが大幅に向上します。バイリンガル文書では、そのうちの 1 つのテキストにマークアップを使用するだけで十分です (実用的な理由から、あまり使用されていない文書)。classガッチの回答で asを使用すると最適なカバレッジが得られますが、最近では CSS での言語セレクターのサポートが非常に広まっているためlang、代わりにより論理的な属性の使用を検討することもできます。

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

次に、次のようなルールを使用します

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

(私の例では、<a>要素を の短いバリアントとして効果的に使用してい<span>ます。正式には、これはテキストが外側の<a>要素内にない場合にのみ可能です。)

ただし、視覚的なスタイルについては、言語によるフォントの選択とは正反対のことが必要になります。同じ行の「Hello」の「e」と「Привет」のキリル文字の「е」が違うと、とても奇妙に見えます。可能であれば、ドキュメント内のすべての言語に同じフォントを使用することをお勧めします。これは、それらすべてで機能するフォントを選択することを意味します。

于 2012-04-05T04:33:41.360 に答える
1

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

そのため、特定のフォントを必要とするテキスト ブロックの周りに要素を作成する必要があります。サーバー側のコードでそれを行うのが理想的ですが、それが実用的かどうかはわかりません。サーバーは次のような 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-05T02:57:40.777 に答える