当我使用 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
我也看到了同样的问题。在我自己的服务器上托管字体文件并重写 @font-face 规则以匹配解决了我的问题,无论是在我的本地开发服务器还是在产品中。
我不知道原因;我最好的猜测是 UIWebViews 中以不同方式强制执行的一些同源问题(由于 App Store 规则,iOS Chrome 是 UIWebView)。
您可以使用 Google Fonts API Loader 它将检测用户的浏览器并发送回适当格式的 CSS。
示例代码可在 这个 Stack Overflow 问题的第一个回复中找到。
这将允许 Safari 和 Chrome(以及其他基于 UIWebView 的浏览器)正确显示字体。
注意:如果您想在本地存储字体,正如@Dave建议的那样,这个CSS应该可以工作。
IOS 设备仅使用 TTF 格式(如果遵循以下开发人员指南,则使用 OTF)。该字体被用作 WOFF、EOT 和 OTF(可能不遵循准则)。有一些服务可以为您提供其他版本。尝试使用 @font-face 指定字体,看看是否可以解决问题! Fontsquirrel 有一个 @font-face 生成器 来完成繁重的工作。
关于后续问题。 Apple 有一些关于 TrueType 字体实现的开发人员文档。可以在这里找到。本质上,TTF 格式将字体存储为 sfnt 资源。唯一可以做到这一点的其他字体格式是 OpenType 的偏移表 sfnt 包装器。由于 IOS 使用 sfnt 包装器读取字体,因此您将遇到不以这种方式存储的字体问题。 (抱歉说了这么多行话)。
在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;
}
如果其他人仍然看到此问题 - iOS 9 或更早版本的 Chrome 中无法加载字体 - 请仔细检查字体是否作为 css 文件导入,而不是作为 js 文件导入。 Fonts.com 将为您提供将字体导入为 js 的选项,该选项在 Chrome / iOS 9 或更低版本上不会被选中。将我的导入更改为 css 为我解决了这个问题。
对我来说作品添加到 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>
我最近在 UIWebView 上遇到了类似的问题。我对 iOS 应用程序和网络源代码进行了额外的更改,但没有任何帮助。
最终通过简单地将 Google Font 的链接更改为 https 来修复它。
我相信我的前任以某种方式编程、克隆或远程使用字体来运行我的设备。我知道一个事实,当我打开飞行模式时,它会立即拉紧关闭,同时仍然显示为打开状态。有谁可以帮助我检查字体是否属于这种情况,或者是否有某些内容被编程到我的设备中。