Persian @font-face doesn't work in Chrome, Bug or not?

淺唱寂寞╮ 提交于 2019-12-07 04:18:57

问题


Not sure if I'm heading a bug in Chrome or something is wrong with my CSS

Here is a demonstration of what I'm talking about: demo link

The problem is that I'm using a custom Farsi font in my website named as BMitra (it is absolutely free in public domain) and all major browsers (latest FF and IE6+) are rendering this font just fine but my Chrome skips this font and switches to system's default tahoma.

Here is my CSS:

@font-face {
    font-family: 'BMitra';
    font-weight: normal;
    src: url('fonts/regular/BMitra.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/regular/BMitra.woff') format('woff'), /* Modern Browsers */
         url('fonts/regular/BMitra.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('fonts/regular/BMitra.svg#svgBMitra') format('svg'); /* Legacy iOS */
    }

@font-face {
    font-family: 'BMitra';
    font-weight: bold;
    src: url('fonts/bold/BMitraBd.woff') format('woff'), /* Modern Browsers */
         url('fonts/bold/BMitraBd.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/bold/BMitraBd.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('fonts/bold/BMitraBd.svg#svgBMitra') format('svg'); /* Legacy iOS */
    }

So, any ideas? is this a bug in webkit or something else. thanks in advance.


Side-notes:
  • The original font is in true-type format and I converted it using an online tool. but I'm sure that the font is not damaged because all other formats are working fine.
  • I've just figured out that someone had the same problem (here is the link) but the solution is not working at all! it also breaks functionality in IE9!
  • I can see that Chrome loads the fonts in Chrome's console so the problem is not with webserver or nonavailability of font resources at the time of page load.

回答1:


It's not a bug. Your font is not standard and also it's not working correctly in Firefox 11 as well (it shows the characters separated from each other which is the sign of the bad font). You can find the new series of Persian fonts for web here. These fonts have no issue with the new versions of the browsers: http://www.scict.ir/Portal




回答2:


I've converted the mentioned fonts in your question and uploaded them in the following Internet addresses:

bMitra Web Font Package

bMitraBd Web Font Package

Also, You must use the following Style Lines:

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

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

and, you should add the following lines in the .htaccess file:

AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/x-font-woff .woff


来源:https://stackoverflow.com/questions/10970001/persian-font-face-doesnt-work-in-chrome-bug-or-not

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!