自定义字体无法在 Firefox 上呈现

Question

为什么我的自定义嵌入字体无法在 Firefox 和 IE 上呈现。它确实在 Chrome 和我的本地机器上呈现。我已正确嵌入它们

请使用 FF 和 Chrome 检查以下链接，您将看到不同之处： http://www.superiorbondcleaning.com.au/devsite/

我正在开发站点，我知道存在重定向问题，所有链接都重定向到父站点。这可能是这个原因吗？

这是我可以在 WordPress 永久链接编辑器中看到的 .httacess 规则：

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /devsite/
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /devsite/index.php [L]
</IfModule>

谁能帮助我为什么不能在 FF 和 IE 中工作，但它在 Chrome 中工作？谢谢。

Answer 1

问题是以下错误，当您打开 Firefox 错误控制台时：

downloadable font: download failed (font-family: "FuturaStd-CondensedLight" style:normal weight:normal stretch:normal src index:2): bad URI or cross-site access not allowed source: http://superiorbondcleaning.com.au/devsite/wp-content/themes/canvas-scb/includes/fonts/FuturaStd-CondensedLight.ttf.

要使用自定义字体，请提供它们的绝对 URL，而不是像现在这样的相对 URL。

将下面几行中的 URL 替换为绝对 URL（也适用于其他字体），然后清除浏览器缓存并再次测试：

@font-face {
    font-family: 'FuturaStd-CondensedBold';
    src: url('includes/fonts/FuturaStd-CondensedBold.eot');
    src: url('includes/fonts/FuturaStd-CondensedBold.eot?#iefix') format('embedded-opentype'), url('includes/fonts/FuturaStd-CondensedBold.woff') format('woff'), url('includes/fonts/FuturaStd-CondensedBold.ttf') format('truetype'), url('includes/fonts/FuturaStd-CondensedBold.svg') format('svg');
    font-weight: normal;
    font-style: normal;