【问题标题】:Is there any working @font-face for Bengali (Bānglā) language?孟加拉语(Bānglā)语言有没有可用的@font-face?
【发布时间】:2013-11-13 15:50:49
【问题描述】:

几天来,我一直在努力将孟加拉语 (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 生成器制作了网络字体。

我把字体称为:

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

结果:不工作!!!

【问题讨论】:

    标签: css unicode fonts font-face


    【解决方案1】:

    经过长期具有挑战性的研究,我失败了。但突然我想起了我在Bengali (Bānglā) Wikipedia 的巢穴,在 Jayanthanath 的帮助下,我们社区将“Siyam Rupali”嵌入了孟加拉语(Bānglā)维基百科。可以在here in this Village Pump discussion archive 找到讨论。然后我得到了一个想法,并在 bn.wiki 中观察字体嵌入的成功结果。然后使用 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中使用的文件的路径:

    并下载了确切的字体。在那之后,我发现了一些不必要的尺寸不匹配,与我拥有的字体版本。

    +======================+=====================+ |以前的文件大小 | 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 (Potasiyam) 的精彩字体:Siyam Rupali。

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

    编辑

    我发现 unicode-range: 导致 Chrome 出现问题。由于 Siyam Rupali 是一种非常好的字体,具有大量字形,因此我们无需提及范围。所以,你可以避开unicode-range: U+0980-09FF;。 :)

    2019 年更新

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

    【讨论】:

    • 努力工作总是有回报的。但现在我有字体问题:(
    猜你喜欢
    • 1970-01-01
    • 2017-07-31
    • 1970-01-01
    • 2019-02-11
    • 2017-09-06
    • 1970-01-01
    • 2021-11-15
    • 2015-04-17
    • 2013-06-14
    相关资源
    最近更新 更多