谷歌字体在移动设备上无法加载

Question

我正在尝试在我的网页http://iconablare.in/iconablareredesign上使用谷歌字体Six Cap。在桌面端它可以正常工作，但是在移动端全站加载时无法加载。但是当我尝试创建一个只包含该字体的新html文件时，http://iconablare.in/iconablareredesign/style.css可以在网页和移动端都正确加载。有没有人可以帮忙解决一下呢？我在两个文件中使用的是相同的代码。

- sahil lamba

Answer 1

如果可行的话，您可以尝试将Google字体链接脚本放在头部而不是像这样在CSS中导入：

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

改为这样：

@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);

尝试检查是否有效，

无论如何，如果您的头文件无法访问或者坚持将其导入到CSS中，请确保@import代码行是文件的第一行，就像这样：

@import url(http://fonts.googleapis.com/css?family=Six+Caps);
@import url(http://fonts.googleapis.com/css?family=Marcellus+SC);
@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);

img, object, embed, video {
    max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
    width:100%;
}

不要这样写：

@charset "utf-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
    max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
    width:100%;
}


@import url(http://fonts.googleapis.com/css?family=Six+Caps);
@import url(http://fonts.googleapis.com/css?family=Marcellus+SC);
@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);

（在这里也有讨论：如何在CSS文件中导入Google Web字体？）

- Maroun Melhem

Answer 2

请确保 <link href="main.css" rel="stylesheet"> 之后再加上 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Font+Name">。

- bbgatch

---

这个帮助解决了我在使用iOS时遇到的问题。谢谢！ - Bobdabiulder