css - 是否有适用于孟加拉语 (Bānglā) 语言的@font-face？

Question

几天来，我一直在努力将孟加拉语 (Bānglā) Unicode 字体嵌入我的网站，我尝试了很多方法。甚至我也为 @font-face 找到了一些很棒的解决方案，比如 unicode-range ( see deceze's answer )。我什至尝试了所谓的 Bulletproof @font-face Syntax Tutorial by Paul Irish .但最后发现字体嵌入看起来有效，但实际上根本不起作用。如果我从 PC (/windows/fonts) 中删除 Bānglā 字体，则我的浏览器无法从系统加载该字体，并且无法正常工作。我在 @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‎‎)
}

不管怎么说，我从网上下载了 Siyam Rupali 字体(恐怕忘记了来源)，然后使用 FontSquirrel 的@font-face 生成器制作了 webfonts。

我将字体命名为:

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

结果:不工作!!!

Answer 1

经过长期具有挑战性的研究，我失败了。但突然我想起了我在Bengali (Bānglā) Wikipedia的小窝，在 Jayanthanath 的帮助下，我们社区将“Siyam Rupali”嵌入到孟加拉语 (Bānglā) 维基百科中。讨论可见here in this Village Pump discussion archive .然后我有了一个想法，并在 bn.wiki 中观察到 font-embeds 的成功结果。然后使用 Firefox 的“Web Developer”插件，我查看了孟加拉语 (Bānglā) 维基百科主页的所有 CSS。并在那里找到了“Siyam Rupali”。然后从那里完全复制语法:

@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中使用的文件的路径:

• SiyamRupali.eot — ( Wikimedia path )
• SiyamRupali.woff — ( Wikimedia path )
• SiyamRupali.ttf — ( Wikimedia path )

并下载了准确的字体。在那之后，我发现一些不需要的大小不匹配，与我拥有的字体版本不匹配。

+=====================+====================+| PREVIOUS FILE SIZES | BN.WIKI FILE SIZES |+=====================+====================+|      EOT : 23KB     |    EOT : 144KB     ||      TTF : 47KB     |    TTF : 392KB     ||     WOFF : 26KB     |    WOFF : 166KB    ||      SVG : 71KB     |     [NO SVG]       |+=====================+====================+

I thought that can make some difference in proper glyphs. So simply replaced my fonts with the newly downloaded versions. And with my final bit of code:

@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 字体:

• Siyam Rupali - GitHub.com

感谢 Tanbin Islam Siyam(Potasiyam)的出色字体:Siyam Rupali。

下面的列表也可以很好地概述孟加拉语 (Bānglā) Unicode 可用性的改进现状:

• Language Support Status - Indic Language Support: MediaWiki.org

编辑

我发现 unicode-range: 在 Chrome 中导致了问题。由于 Siyam Rupali 是一种非常好的字体，具有大量的字形集合，因此我们无需提及范围。因此，您可以避免unicode-range: U+0980-09FF;。 :)

2019 年更新

unicode-range 现在得到了很好的支持。您可以查看 Can I use Status