导入不在github页面中应用的Google API字体 [英] Importing Google API fonts not applying in github pages
本文介绍了导入不在github页面中应用的Google API字体的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在
Githhub Page Version
$ b
这是我的 Index.html 页
<！doctype html>
< html lang =enclass =no-js>
< head>
< meta charset =UTF-8>
< meta http-equiv =X-UA-Compatiblecontent =IE = edge>
< meta name =viewportcontent =width = device-width，initial-scale = 1，maximum-scale = 1，user-scalable = no;>
< title>样本名称< / title>
<！ - （b）CSS样式表 - >
<！ - Bootstrap - >
< link type =text / css =stylesheethref =bootstrap / css / bootstrap.min.css>
<！ - 图书馆 - >
< link type =text / css =stylesheethref =library / font-awesome / css / font-awesome.min.css>
< link type =text / css =stylesheethref =library / popup / popup.css>
< link type =text / css =stylesheethref =library / owl-carousel / owl.carousel.css>
< link type =text / css =stylesheethref =library / owl-carousel / owl.theme.css>
<！ - STYLE表格 - >
< link type =text / css =stylesheethref =css / style.css>
< link type =text / css =stylesheethref =css / responsive.css>
<！ - （c）Javascript支持浏览器的问题 - >
< script type =text / javascriptsrc =library / modernizr / modernizr.js>< / script>
<！ - [if lt IE 9]>
< script src =https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js>< / script>
< script src =https://oss.maxcdn.com/respond/1.4.2/respond.min.js>< / script>
<！[endif] - >
< / head>
< body>
< script type =text / javascriptsrc =js / jquery-1.11.3.min.js>< / script>
< script type =text / javascriptsrc =bootstrap / js / bootstrap.min.js>< / script>
< script type =text / javascriptsrc =library / jquery-easing / jquery.easing.min.js>< / script>
< script type =text / javascriptsrc =library / easy-pie-charts / jquery.easypiechart.min.js>< / script>
< script type =text / javascriptsrc =library / mixitup / jquery.mixitup.min.js>< / script>
< script type =text / javascriptsrc =library / popup / jquery.popup.min.js>< / script>
< script type =text / javascriptsrc =library / owl-carousel / owl.carousel.min.js>< / script>
< script type =text / javascriptsrc =https://maps.google.com/maps/api/js?sensor=true>< / script>
< script type =text / javascriptsrc =library / gMap / jquery.gmap.min.js>< / script>
< script type =text / javascriptsrc =js / script.js>< / script>
< / body>
< / html>
当我使用萤火虫进行调试时，我看见Google api字体呈现的主题字体如下< c $ c> style.css file
@import url（http：//fonts.googleapis ？的.com / CSS家族=后肢：300500）;
@import url（http://fonts.googleapis.com/css?family=Open+Sans:400,400italic）;
#preloader {
position：fixed;
top：0;
剩下：0;
right：0;
bottom：0;
背景颜色：＃1a1b23;
z-index：10000;
.loader {...
我可以在这里做
解决方案
我想这可能是因为github页面使用HTTPS，但字体的URL是HTTP。 p>
您可以尝试更改网址，方法是移除 http：，如这个例子？
I hosted a theme on GitHub pages , this theme working properly in localhost environment, but when I host this its not applying correct font which are importing form Google API
Difference here
Local host version
Githhub Page Version
This is my Index.html page
<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no;">
<title>Sample Name</title>
<!--( b ) CSS Stylesheets -->
<!-- Bootstrap -->
<link type="text/css" rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<!-- Library -->
<link type="text/css" rel="stylesheet" href="library/font-awesome/css/font-awesome.min.css">
<link type="text/css" rel="stylesheet" href="library/popup/popup.css">
<link type="text/css" rel="stylesheet" href="library/owl-carousel/owl.carousel.css">
<link type="text/css" rel="stylesheet" href="library/owl-carousel/owl.theme.css">
<!-- STYLE Sheets -->
<link type="text/css" rel="stylesheet" href="css/style.css">
<link type="text/css" rel="stylesheet" href="css/responsive.css">
<!--( c ) Javascript For Browser Support Issues -->
<script type="text/javascript" src="library/modernizr/modernizr.js"></script>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="library/jquery-easing/jquery.easing.min.js"></script>
<script type="text/javascript" src="library/easy-pie-charts/jquery.easypiechart.min.js"></script>
<script type="text/javascript" src="library/mixitup/jquery.mixitup.min.js"></script>
<script type="text/javascript" src="library/popup/jquery.popup.min.js"></script>
<script type="text/javascript" src="library/owl-carousel/owl.carousel.min.js"></script>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="library/gMap/jquery.gmap.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
When I debug this using firebug I saw that theme fonts rendering from Google api fonts as following in style.css file
@import url(http://fonts.googleapis.com/css?family=Hind:300,500);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,400italic);
#preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #1a1b23;
z-index: 10000;
}
.loader { ...
So what can I do here
解决方案
I think this might be because the github page is using HTTPS but the font URL is HTTP.
Can you try changing the URL by removing http: like in this example?
这篇关于导入不在github页面中应用的Google API字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
