Google字体未在移动设备上加载

时间:2014-09-09 09:25:01

标签: css mobile google-font-api

我正在尝试在我的网页http://iconablare.in/iconablareredesign

上使用Google font Six Cap

它在桌面上完美运行,但它不会在完整网站的移动设备上加载,但当我尝试使用该字体制作新的html文件时

http://iconablare.in/iconablareredesign/style.css它可以在网络和移动设备上完全加载吗?

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

1 个答案:

答案 0 :(得分:9)

如果你可以尝试在标题中包含谷歌字体链接脚本而不是像你这样在你的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);

(此处也讨论:How to import Google Web Font in CSS file?