波斯语@font-face在Chrome中无法正常工作，是bug还是其他原因？

Question

我不确定是否在Chrome浏览器中出现了错误，或者我的CSS样式表有问题。

这是我所说的问题的演示：演示链接

问题是，我在我的网站上使用了一种自定义波斯语字体，名为BMitra （它在公共领域中是完全免费的），所有主要的浏览器（最新的 Firefox 和 IE6+）都可以很好地渲染这种字体，但是我的 Chrome 浏览器会跳过这种字体并切换到系统默认字体tahoma。

以下是我的 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 */
    }

那么，有什么想法吗？这是webkit的一个bug还是其他原因导致的。谢谢提前。

---

附注：

• 原始字体是真正的字体格式，我使用在线工具进行转换。但我确定字体没有损坏，因为所有其他格式都可以正常工作。
• 我刚刚发现有人遇到了相同的问题（链接在此），但解决方案根本不起作用！它还会破坏IE9的功能！
• 我可以看到Chrome在Chrome的控制台中加载字体，所以问题不在于web服务器或页面加载时字体资源的不可用性。

- Sepehr

---

似乎Chrome无法在资源选项卡的预览窗口中正确呈现字体。 - Evan Mulawski

为了让您的困境更加严重，在Chrome beta(20)中，除了顶部的<h1>显示了夹杂着“空框”字形的波斯字符之外，其他看起来都很好，如果我将H1的大小从25px更改为其他一些值，它会出现某种原因正确地呈现。 - Alex K.

@AlexK，我在Chrome Canary上也遇到了完全相同的问题。很奇怪。看起来这是一个bug，不是吗？ - Sepehr

Answer 1

你的字体不标准，并且在Firefox 11中也无法正常工作（显示字符分离，这是错误字体的标志），并非程序问题。 你可以在这里找到适用于web的新系列波斯语字体。这些字体在浏览器的新版本中没有问题：http://www.scict.ir/Portal。

- VahidN

---

但是我在FF10+中没有任何问题！也许你是对的。我会试一试。顺便说一句，谢谢。 - Sepehr

请问你能再分享一遍吗？ - Mahdyfo

Answer 2

我已经将您问题中提到的字体转换并上传至以下互联网地址：

bMitra Web 字体包

bMitraBd Web 字体包

此外，您必须使用以下样式行：

@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;
}

另外，您应该在.htaccess文件中添加以下行：

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

- MRS1367