4

動的に生成された、異なる文字エンコーディングを持つコンテンツに複数のフォントを適用できるようにしたいと考えています。次のように、メソッドを使用しfont-faceて CSS を変更しました。

.ResultsTitleClass{ font-family: 'custom-font', Arial Unicode MS, Arial, verdana; !important ; }

@font-face {
font-family: 'custom-font';
    src: url('tt0596m0-webfont.eot');
    src: url('tt0596m0-webfont.eot?#iefix') format('embedded-opentype'),
         url('tt0596m0-webfont.woff') format('woff'),
         url('tt0596m0-webfont.ttf') format('truetype'),
         url('tt0596m0-webfont.svg#custom-font') format('svg');
font-weight: normal;
font-style: normal;
}

私の理解では、 font-face を使用すると、カスタム フォントとフォールバックのリストを指定できます。ただし、カスタム フォントの目的は、ギリシャ語、ロシア語、ヘブライ語の短縮形を含むレコード タイトルを処理することであり、これを (Arial が使用される) ローマ字体言語に一般的に適用したくありません。クライアント側の JavaScript を作成してタイトルを読み取り、拡張 Unicode 文字またはエンコードされた文字を探すようにアドバイスされた人がいます。見つかった場合は、適用されている CSS クラスを更新します。ただし、さまざまな解決策を検討したいと思います。代替ソリューションはありますか？

私は CSS とフォントに特に自信がないので、私の問題が明確に説明されていることを願っています!

本当にありがとう、

私。

4

2 に答える 2

7

原則として、次のように CSS3 フォントのプロパティを使用してこれを行うことができますunicode-range(ここでは簡単にするために .ttf だけで遊んでいます)。

@font-face {
  font-family: customFont;
  src: local(Arial Unicode MS);
}
@font-face {
  font-family: customFont;
  src: url('tt0596m0-webfont.eot');
  src: url('tt0596m0-webfont.eot?#iefix') format('embedded-opentype'),
       url('tt0596m0-webfont.woff') format('woff'),
       url('tt0596m0-webfont.ttf') format('truetype'),
       url('tt0596m0-webfont.svg#custom-font') format('svg');
  unicode-range: U+370-FFFF;
}

これはcustomFont、U+0370 以上の文字 (ギリシャ文字やキリル文字など) に独自のフォントを使用し、残り (主にラテン文字) に Arial Unicode を使用する、実質的に複合フォントであることを意味します。

悪いニュースは、よくあることですが、ブラウザーのサポートが十分でないことです。ここで Firefox が主な問題のようです: まったくサポートunicode-rangeしていません。

JavaScript には文字プロパティ (「スクリプト」プロパティなど) を検査するための組み込みツールがないため、質問で説明されているアプローチも文字の範囲に基づく必要があります。

各タイトルの言語に関する情報が利用可能な場合 (適切に設計されたデータベースにある場合が多い)、生成された HTML ドキュメントの属性に含める必要がlangあります。これをスタイル設定に使用できます。またはclass、適切にエンコードされたスクリプト (書記体系) に関する情報を含む属性を発行することもできます。

ただし、タイポグラフィの観点から、比較可能なアイテム (レコード タイトルなど) が提示されるコンテキストでは、すべての書記体系に同じフォントを使用することを強くお勧めします。これは特に、多くの文字形式を共有するギリシャ語、キリル語、ラテン語の「兄弟」スクリプトに当てはまります。たとえば、ギリシャ語の小文字の omicron、キリル文字の小文字の o、およびラテン語の小文字の o は、まったく同じに見えるはずです。より多くの異なるスクリプトでは、問題はそれほど深刻ではありませんが、たとえば、セリフ フォントのラテン語テキストは、サンセリフ フォントのヘブライ語テキストと組み合わせると奇妙に見えます。

于 2012-09-04T13:02:22.680 に答える
1

Jukka Korpela の回答により、本当に助かりました。興味のある方と共有したいのは、上記の unicode-range メソッドを使用して、カスタム フォントのキリル文字を有効にするために使用した実装です。

以下の定義を使用すると、lang 属性などを指定する必要がありません。基本的には、キリル文字の unicode 範囲に使用する別のフォント ファイルを定義します。

私の側からの興味深い観察は、ドキュメントにキリル文字が含まれていなくても、デフォルトですべてのブラウザー (IE、FF、Safari) が両方のフォント ファイルをロードすることです。Chrome だけが追加のキリル文字ファイルをオンデマンドで読み込みます。定義された Unicode 範囲のインスタンスが検出されるまでフォントをロードしないことを意味します。

/*
 CustomFont Latin
 */


@font-face {
    font-family: 'CustomFont Regular';
    src: url('/fonts/CustomFont/Latin/Regular/CustomFont-Regular.eot'); /* IE9 */
    src: url('/fonts/CustomFont/Latin/Regular/CustomFont-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/fonts/CustomFont/Latin/Regular/CustomFont-Regular.woff') format('woff'); /* Modern Browsers */
    font-weight: normal;
    font-style: normal;
}
/*
 CustomFont Latin
 */

/*
 CustomFont Cyrillic
 */

@font-face {
    font-family: 'CustomFont Regular';
    src: url('/fonts/CustomFont/Cyrillic/Regular/CustomFontCy-Regular.eot'); /* IE9 */
    src: url('/fonts/CustomFont/Cyrillic/Regular/CustomFontCy-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/fonts/CustomFont/Cyrillic/Regular/CustomFontCy-Regular.woff') format('woff'); /* Modern Browsers */
    font-weight: normal;
    font-style: normal;
    unicode-range: U+0400-04FF;
}

/*
 CustomFont Cyrillic
 */

役立つ読み物:

developer.mozilla.org - ユニコード範囲

と

Unicode のキリル文字

于 2015-11-05T09:29:39.293 に答える