导入不在github页面中应用的Google API字体

本文介绍了导入不在github页面中应用的Google API字体的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！问题描述 29岁程序员，3月因学历无情被辞！我在 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样式表 - > < 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> < link type =text / css =stylesheethref =css / style.css> < link type =text / css =stylesheethref =css / responsive.css> < 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字体呈现的主题字体如下 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 APIDifference hereLocal host versionGithhub Page VersionThis 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>   <link type="text/css" rel="stylesheet" href="bootstrap/css/bootstrap.min.css">  <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">  <link type="text/css" rel="stylesheet" href="css/style.css"> <link type="text/css" rel="stylesheet" href="css/responsive.css">  <script type="text/javascript" src="library/modernizr/modernizr.js"></script>  </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字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！上岸，阿里云！