自定义字体在Chrome中未能正确加载

Question

我正在开发一个网站，它可以在所有浏览器中正常运行，但当我使用Google Chrome时，有时文字字体无法正确加载。我已经尝试了备用字体，但仍然没有成功 - 非常苦恼。

当我提供备用字体时，Google Chrome总是忽略自定义字体，原因很奇怪，所以问题是为什么Google Chrome不能正确加载字体，是否有办法强制加载字体？

这是该网站的链接：http://www.rpmediasolutions.com/wordpress

@font-face {
font-family: Solano;
src: url("http://www.rpmediasolutions.com/wordpress/Fonts/solanogothicmvb-sb.eot?#iefix") format("embedded-opentype")
, url("http://www.rpmediasolutions.com/wordpress/Fonts/solanogothicmvb-sb.svg#Solano Gothic MVB Lt") format("svg"),
url("http://www.rpmediasolutions.com/wordpress/Fonts/solanogothicmvb-sb.woff") format("woff"), 
url("http://www.rpmediasolutions.com/wordpress/Fonts/solanogothicmvb-sb.ttf") format("truetype");
}

- Hashey100

---

我认为可以使用不同的@font-face为每个字体添加多种字体。 - عثمان غني

展示代码，其中使用了字体族。 - Jaykumar Patel

Answer 1

我已经找到解决方法。

这是Chrome浏览器的一个bug，导致字体无法正确渲染。

以下是该bug的链接：https://code.google.com/p/chromium/issues/detail?id=336476 我尝试了帖子中提到的CSS方法，但对我没有用。

所以我将jquery放在页脚，它可以隐藏body中的所有元素并重新显示。

它会有几秒钟的延迟，但这是一个临时解决方法，直到Google修复此问题。

这个jquery应该放在页脚。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>  <script type="text/javascript" charset="utf-8">
$(function() { $('body').hide().show(); });
</script>

- Hashey100

Answer 2

我遇到了同样的问题，并通过更改URL来解决它。不要去"http://..."找文件，只需引用存储字体的服务器上的目录即可。

例如，如果您的字体在public_html文件夹中，而您的CSS文件在public_html中的一个文件夹中，则只需要返回一个目录（../）并访问该字体即可。

@font-face {
font-family: myFont;
src: url('../myFont.ttf')
}

- Austin

---

他说：“在所有浏览器上都能正常工作，但是当我使用谷歌浏览器时，有时字体真的无法加载。” - Pooya