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

问题描述 投票:0回答:8

当我使用 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
ios css google-chrome responsive-design google-webfonts
8个回答
9
投票

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

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


5
投票

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

示例代码可在 这个 Stack Overflow 问题的第一个回复中找到。

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

注意:如果您想在本地存储字体,正如@Dave建议的那样,这个CSS应该可以工作。


3
投票

IOS 设备仅使用 TTF 格式(如果遵循以下开发人员指南,则使用 OTF)。该字体被用作 WOFF、EOT 和 OTF(可能不遵循准则)。有一些服务可以为您提供其他版本。尝试使用 @font-face 指定字体,看看是否可以解决问题! Fontsquirrel 有一个 @font-face 生成器 来完成繁重的工作。

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


2
投票

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

0
投票

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


0
投票

对我来说作品添加到 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>

0
投票

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

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


0
投票

我相信我的前任以某种方式编程、克隆或远程使用字体来运行我的设备。我知道一个事实,当我打开飞行模式时,它会立即拉紧关闭,同时仍然显示为打开状态。有谁可以帮助我检查字体是否属于这种情况,或者是否有某些内容被编程到我的设备中。

© www.soinside.com 2019 - 2024. All rights reserved.