Question

当我使用Google Webfonts时，它们可以在我关注的每个浏览器上加载，除了Chrome / iOS。这看起来很奇怪，因为它适用于Chrome for Mac和Safari for iOS，因此我认为这不是iOS问题或Google Chrome问题。它似乎特定于Chrome / iOS。

关于如何解决这个问题的任何想法或想法都会很棒！

谢谢！

修改

我正在使用Google上托管的Google网络字体，其中包含以下内容：

<link href="http://fonts.googleapis.com/css?family=Leckerli+One" rel="stylesheet" type="text/css" />

在我的字体（SASS）中，我使用以下内容：

h1
  font-family: "Leckerli One", cursive

Answer 1

我看到了同样的问题。在我自己的服务器上托管字体文件并重写@ font-face规则来匹配解决了我的问题，包括我的本地开发服务器和prod。

我不知道原因;我最好的猜测是在UIWebViews中强制执行的同源问题（由于App Store规则，iOS Chrome是UIWebView）。

Answer 2

IOS设备仅使用TTF格式（如果遵循以下开发人员指南，则使用OTF）。该字体被用作WOFF，EOT和OTF（可能不遵循指南）。有一些services将为您提供其他版本。尝试使用@ font-face指定字体，看看是否能解决问题！ Fontsquirrel有@font-face generator来完成繁重的工作。

关于跟进问题。 Apple提供了一些关于TrueType字体实现的开发人员文档。它可以找到here。从本质上讲，TTF格式将字体存储为sfnt资源。唯一可以做到这一点的其他字体格式是OpenType的偏移表sfnt包装器。因为IOS使用sfnt包装器读取字体，所以您将遇到以这种方式存储的字体问题。（对不起所有的行话谈话）。

Answer 3

您可以使用Google Fonts API Loader来检测用户的浏览器并发回适当格式的CSS。

this Stack Overflow question上的第一个回复中提供了示例代码。

这将允许Safari和Chrome（以及其他基于UIWebView的浏览器）正确显示字体。

注意：如果你想在本地存储字体，就像@Dave建议的那样，this CSS应该有效。

Answer 4

在 CSS 中，您可以使用

!important

示例：

@font-face {
  font-family: 'Monda' !important;
  font-style: normal !important;
  font-weight: 400 !important;
  src: local('Monda Regular'), local('Monda-Regular'), url(http://themes.googleusercontent.com/static/fonts/monda/v1/sk05J8GA1NvUxDnk43EgAQ.woff) format('woff') !important;
}

Answer 5

如果其他人仍然看到此问题 - 在iOS 9或更早版本的Chrome中未加载的字体 - 请仔细检查该字体是作为css文件导入的，而不是作为js文件导入。 Fonts.com将为您提供将字体导入为js的选项，这些选项无法在Chrome / iOS 9或更低版本中获取。将我的导入更改为css为我修复了这个问题。

Answer 6

对我来说，作品添加到php页面：

<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Trocchi');
@import url('https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');
</style>

Answer 7

我最近遇到了与UIWebView类似的问题。我对iOS应用和网络资源进行了额外的更改，没有任何帮助。

最后通过简单地将Google字体的链接更改为 https 。

来修复它

Google Chrome字体不会在Chrome for iOS中加载

7 个答案: