Google 字体无法在移动设备中加载

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

我读过类似的帖子,但这个问题有点不同:我有:

<head>
    <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,400italic' rel='stylesheet' type='text/css'>
//rest of the code...

在CSS样式文件中我有:

body{
font-family: 'Source Sans Pro', sans-serif;
    //rest of the code...

它在浏览器中运行得很好,但是当我用手机输入时,单词就消失了,页面永远只有结构。我仍在开发网页,因此我尝试使用移动设备来检查一切是否正常。

1.- 我已经尝试过

@import url(http://fonts.googleapis.com/....
但什么也没有。

2.- 我已将 css 文件中的字体更改为 Arial 并且可以正常工作。

3.- 我的手机是带有 chrome 的 Nexus 4。

4.- 我尝试过使用 Google Api 的另一种字体,但没有任何效果。

5.- 它在桌面浏览器中完美运行。即使在 IE 中也是如此。

有人知道可能是什么问题吗?谢谢!

css mobile fonts
1个回答
0
投票
根据 github 问题上的

@ajck似乎是 Chrome 在移动设备上的限制。导入谷歌字体的经典方法不适用于移动设备上的网络字体加载器。仅当您直接在 CSS 中导入字体时,它才会起作用。我还没有在 IOS 上尝试过,但我相信它是一样的。这是 github issues 上提供的示例:

<style type="text/css">
@font-face {
  font-family: 'Courgette';
  font-style: normal;
  font-weight: 400;
  src: local('Courgette Regular'), local('Courgette-Regular'), url(https://fonts.gstatic.com/s/courgette/v4/BHG8ZtTfO0yYnp02--QxqltXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
</style>

应用这些更改后,我的字体似乎可以在我的 Android 手机上正确加载。希望这也能解决您的问题!

来源:https://github.com/typekit/webfontloader/issues/289

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