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

Question

我正在尝试在我的网页上使用 Google 字体六大写 http://iconablare.in/iconablareredesign

它在桌面上运行良好，但无法在具有完整网站的移动设备上加载，但是当我尝试使用该字体制作新的 html 文件时

http://iconablare.in/iconablareredesign/style.css它完美地在网络和移动设备上加载，任何人都可以帮忙吗？

我在两个文件中使用相同的代码。

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

并尝试看看这是否有效，

无论如何，如果您的 header 不可访问，或者您坚持将其导入您的 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);

(也在这里讨论: How to import Google Web Font in CSS file?)