Google Web 字体无法在 iOS 版 Chrome 中加载

Posted

技术标签:

【中文标题】Google Web 字体无法在 iOS 版 Chrome 中加载【英文标题】:Google Web Fonts don't load in Chrome for iOS 【发布时间】:2012-11-27 09:01:22 【问题描述】:

当我使用 Google Webfonts 时,它们在我关心的每个浏览器上都能正常加载,除了 Chrome/ios。这看起来很奇怪,因为它在 Mac 版 Chrome 和 iOS 版 Safari 上运行良好,所以我认为这不是 iOS 问题或 Google Chrome 问题。它似乎是特定于 Chrome/iOS 的。

任何关于如何解决此问题的想法或想法都会很棒!

谢谢!

编辑

我正在使用托管在 Google 上的 Google Web Fonts,其中包含以下内容:

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

在我的字体 (SASS) 中,我使用以下字体:

h1
  font-family: "Leckerli One", cursive

【问题讨论】:

如何使用谷歌网络字体——由谷歌远程托管,或在您自己的服务器上? (这通常会有所不同。)哪些字体?您使用的确切代码是什么? 您是否尝试过下载字体、自己托管并查看它是否显示?可能值得一试。 Andrew- 您有指向您网站的链接吗?我目前在我的网站上使用 Google Webfonts,它们在 iOS 上的 Chrome 中工作。我也用那个字体测试过,它似乎工作:djfarrelly.com/test 我确认此字体即使在 iOS 的 Chrome(所有最新版本)上也能正常工作。进进出出都测试过了。看起来问题出在您的代码中(或与 SASS 相关)。您能否向我/我们展示您的网站,以便我可以手动解析其代码以便找到问题? 打开开发者工具控制台的时候如果出现“OTS解析错误”之类的,恭喜你,这里有解决办法github.com/googlei18n/sfntly/issues/52github.com/googlei18n/sfntly/pull/54 【参考方案1】:

我遇到了同样的问题。在我自己的服务器上托管字体文件并重写 @font-face 规则以匹配解决了我的问题,无论是在我的本地开发服务器还是在产品中。

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

【讨论】:

答案应该确实回答了这个问题,如果没有并且您想说点什么,请在评论中(如果您的声誉为 50,您可以这样做) 我解决了这个问题,并回答了他原来的问题。如果我不回答他深入的理论跟进,那么我会期望不会收到赏金,一切都会在这个世界上。【参考方案2】:

IOS 设备仅使用 TTF 格式(或 OTF,如果它们遵循以下开发者指南)。该字体被用作 WOFF、EOT 和 OTF(可能不遵循指南)。有一些services 会给你其他版本。尝试使用@font-face 指定字体,看看是否能解决问题! Fontsquirrel 有一个 @font-face generator 来完成繁重的工作。

关于后续问题。 Apple 提供了一些关于 TrueType 字体实现的开发人员文档。可以找到here。本质上,TTF 格式将字体存储为 sfnt 资源。唯一可以做到这一点的其他字体格式是 OpenType 的偏移表 sfnt 包装器。因为 IOS 使用 sfnt 包装器读取字体,所以您会遇到不以这种方式存储的字体的问题。 (抱歉所有的行话)。

【讨论】:

不是我的经验:至少在 iOS6 中,WOFF 字体运行良好(在 Safari 和 Chrome 中,我从自己的服务器提供它们之后)。请参阅我对这个问题的回答。【参考方案3】:

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

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

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

注意:如果你想在本地存储字体,就像@Dave 建议的那样,this CSS 应该可以工作。

【讨论】:

【参考方案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;

【讨论】:

请详细说明,因为您的回答完全没有意义。 他建议这里的 CSS 实例被进一步覆盖在样式表中(因此:CSS-Cascading Style Sheet),因此您可能需要使用 !important 来覆盖它;但是我不相信这是你的问题。【参考方案5】:

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

【讨论】:

【参考方案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>

【讨论】:

【参考方案7】:

我最近在 UIWebView 上遇到了类似的问题。我对 iOS 应用程序和网络源进行了额外的更改,但没有任何帮助。

最后通过简单地将 Google Font 的链接更改为 https 来修复它。

【讨论】:

以上是关于Google Web 字体无法在 iOS 版 Chrome 中加载的主要内容,如果未能解决你的问题,请参考以下文章

iOS 版 Google 地图链接

用于颤振的 Google 字体包无法在发布模式下加载字体

如何在iOS中将具有特定大小的自定义字体设置为Web View?

Google 字体无法在 Google Chrome 上呈现

将 Google Web 字体用于自定义 WordPress 主题

Titanium mobileweb 字体无法正常工作