7

ベンガル語 (Bānglā) の Unicode フォントを Web サイトに埋め込むのに数日間苦労しており、多くのことを試しました。@font-face同様の素晴らしい解決策がいくつかありましたunicode-range（decezeの回答を参照）。Paul Irish による、いわゆる Bulletproof @font-face Syntax Tutorial も試しました。しかし、最終的に、フォントの埋め込みが機能しているように見えますが、実際にはまったく機能していないことがわかりました。PC から Bānglā フォントを削除すると ( /windows/fonts)、ブラウザがシステムからフォントを読み込めなくなり、機能しなくなります。私が使用して@font-faceいるのは次のとおりです。

@font-face {
  font-family: 'Siyam Rupali';
  src: url('fonts/siyamrupali-webfont.eot');
  src: url('fonts/siyamrupali-webfont.eot?#iefix') format('embedded-opentype');
  src: local('Siyam Rupali Regular'), local('Siyam Rupali'),
  url('fonts/siyamrupali-webfont.woff') format('woff'),
  url('fonts/siyamrupali-webfont.otf') format('opentype'),
  url('fonts/siyamrupali-webfont.svg#siyam_rupaliregular') format('svg');
  font-weight: normal;
  font-style: normal;
  unicode-range: U+0980-09FF; //Bengali Range (source: http://www.unicode.org/charts/PDF/U0980.pdf‎‎)
}

Web からフォントをダウンロードしたことは言うまでもありませんがSiyam Rupali(残念ながらソースを忘れてしまいました)、FontSquirrel の @font-face ジェネレーターを使用して Web フォントを作成しました。

そして、私はフォントを次のように呼び出しました：

body{
   font-family: "Siyam Rupali", Cambria, sans-serif;
}

結果:機能しません!!!

4

1 に答える 1

16

長い挑戦的な研究の後、私は失敗しました。しかし突然、ベンガル語 (Bānglā) ウィキペディアの私の書斎を思い出しました。Jayanthanath の助けを借りて、コミュニティはベンガル語 (Bānglā) ウィキペディアに「Siyam Rupali」を埋め込みました。ディスカッションは、この Village Pump ディスカッション アーカイブにあります。それから私はアイデアを得て、bn.wiki で font-embeds の成功結果を観察しました。次に、Firefox の「Web 開発者」アドオンを使用して、ベンガル語 (Bānglā) Wikipedia のホームページの CSS をすべて表示しました。そこで見つけたのが「シヤム・ルパリ」。次に、そこから構文を正確にコピーしました。

@font-face { font-family: 'Siyam Rupali';
    src: url('https://bits.wikimedia.org/static-current/extensions/UniversalLanguageSelector/data/fontrepo/fonts/SiyamRupali/SiyamRupali.eot?version=1.070');
    src: local('Siyam Rupali'),     url('https://bits.wikimedia.org/static-current/extensions/UniversalLanguageSelector/data/fontrepo/fonts/SiyamRupali/SiyamRupali.woff?version=1.070') format('woff'),        url('https://bits.wikimedia.org/static-current/extensions/UniversalLanguageSelector/data/fontrepo/fonts/SiyamRupali/SiyamRupali.ttf?version=1.070') format('truetype');
    font-style: normal;}

それに応じてCSSを実装しました。しかし、まだ問題があります。次に、bn.wiki で使用されているファイルのパスをコピーしました。

正確なフォントをダウンロードしました。そしてその後、私が持っていたフォントのバージョンと、サイズの望ましくない不一致がいくつか見つかりました。

+====================+===================+
| | 以前のファイル サイズ | BN.WIKI ファイル サイズ |
+====================+===================+
| | EOT : 23KB | EOT : 144KB |
| | TTF : 47KB | TTF : 392KB |
| | WOFF : 26KB | WOFF : 166KB |
| | SVG : 71KB | [SVG なし] |
+====================+===================+

それが適切なグリフにいくらかの違いをもたらす可能性があると思いました。そのため、フォントを新しくダウンロードしたバージョンに単純に置き換えました。そして、私の最後のコードで：

@font-face {
  font-family: 'Siyam Rupali';
  src: url('fonts/SiyamRupali.eot?version=1.070');
  src: local('Siyam Rupali'), url('fonts/SiyamRupali.woff?version=1.070') format('woff'),       url('fonts/SiyamRupali.ttf?version=1.070') format('truetype');
  font-style: normal;
  unicode-range: U+0980-09FF; //Bangla Range (source: http://www.unicode.org/charts/PDF/U0980.pdf‎‎)
}

それは単に魅力のように機能します！防弾でもダメだからIE6は気にしない！:( Firefox 20.0、Opera 10.10、および Chrome 30.0.1599.101 m をテストしました。

フォント Siyam Rupali が開発者コミュニティで利用できるようになりました。

Tanbin Islam Siyam (the Potasiyam ) のすばらしいフォント Siyam Rupali に感謝します。

また、次のリストは、ベンガル語 (Bānglā) Unicode の可用性の向上の現状の概要を示しています。

編集

unicode-range:Chrome で問題が発生していることがわかりました。Siyam Rupali は膨大な数のグリフを備えた非常に優れたフォントであるため、その範囲について言及する必要はありません。したがって、回避できunicode-range: U+0980-09FF;ます。:)

2019年アップデート

unicode-range現在は十分にサポートされています。Can I useステータスを確認できます

于 2013-11-02T15:59:39.330 に答える