Fatal编程技术网
  • javascript/
  • Javascript 如何解决Google Chrome中Roboto字体加载的问题？

Javascript 如何解决Google Chrome中Roboto字体加载的问题？

javascript html css

Javascript 如何解决Google Chrome中Roboto字体加载的问题？,javascript,html,css,Javascript,Html,Css,我正在努力呈现我的网站，我在谷歌浏览器上花了很多时间，但在Mozilla上效果很好。控制台显示错误 GET file://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic net::ERR_FILE_NOT_FOUND 我尝试在CSS和HTML中导入directy，如下所示： @import url(http://fonts.googleapis.com/css?family=Roboto:400,400

我正在努力呈现我的网站，我在谷歌浏览器上花了很多时间，但在Mozilla上效果很好。控制台显示错误

GET file://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic net::ERR_FILE_NOT_FOUND
我尝试在CSS和HTML中导入directy，如下所示：

@import url(http://fonts.googleapis.com/css?family=Roboto:400,400italic,500,500italic,700,700italic,900,900italic,300italic,300,100italic,100);

body {
   font-family: 'Roboto', sans-serif;
}
但它仍然不起作用，它抛出了同样的错误

以下是我的网站的完整HTML代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"> </meta>
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"></meta>
        <title>Sign in</title>
        <style>
            @import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
        </style>
        <!-- JQuery Mobile -->
        <link rel="stylesheet" href="./jquery/jquery.mobile-1.4.5.css"></link>
        <!-- Project CSS -->
        <link rel="stylesheet" href="./css/style.css"></link>
        <!-- NativeDroid2 CSS -->
        <link rel="stylesheet" href="./bower_components/nativeDroid2/css/nativedroid2.css"></link>
    </head>
    <body>
        <div data-role="main" class="ui-content">
            <form method="post">
                <div class="img-container">
                    <img src="img/logo_gemott.png" alt="No es pot carregar la imatge" height="110" width="350">
                </div>

                <div>
                    <h2>Registre</h2>
                    <hr>
                    <label for="mail"><b>Correu electrònic</b></label>
                    <input type="text" placeholder="Introduir correu electrònic..." name="mail" required>
                    <label for="psw"><b>Contrasenya</b></label>
                    <input type="password" placeholder="Introduir contrasenya..." name="psw" required>
                    <div class="center-text">
                        <p>Al registrar-te, acceptes els <a href=#>termes de privacitat</a></p>
                        <p>Ja estàs <a href="login.html">registrat?</a></p>
                    </div>
                </div>

                <a href="javascript:registry()" class="ui-btn ui-btn-raised clr-primary">Registrar-me</a>

                <div class="img-container" id="uab-logo">
                    <img src="img/UAB.jpg" alt="No es pot carrerar la imatge" height="150" witdh="150">
                </div>
            </form>
        </div>
        <!-- JQuery -->
        <script type="text/javascript" src="jquery/jquery-2.2.4.js"></script>
        <!-- Project Js -->
        <script type="text/javascript" src="js/app.js"></script>
        <!-- JQuery Mobile -->
        <script type="text/javascript" src="jquery/jquery.mobile-1.4.5.min.js"></script>
        <!-- NativeDroid2 Js -->
        <script type="text/javascript" src="bower_components/Waves/dist/waves.js"></script>
        <script type="text/javascript" src="bower_components/nativeDroid2/nd2settings.js"></script>
        <script type="text/javascript" src="bower_components/nativeDroid2/js/nativedroid2.js"></script>
    </body>
</html>


登录
@导入url（'https://fonts.googleapis.com/css?family=Roboto&display=swap');
登记册


科雷乌电气公司
康特塞尼亚
艾尔·特，接受厄尔斯

是的
您只需定义
字体系列：“Roboto”，无衬线在
CSS
或
body
标记中




登录
@导入url（'https://fonts.googleapis.com/css?family=Roboto&display=swap');
身体{
字体系列：“Roboto”，无衬线；
}
登记册


科雷乌电气公司
康特塞尼亚
艾尔·特，接受厄尔斯

是的


导入谷歌字体的标准方法是在HTML的
标题
部分放置
链接
标记：


<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">


添加以下内容：


<link rel="preload" href="https://fonts.gstatic.com/s/roboto/v19/KFOmCnqEu92Fr1Mu7GxKOzY.woff2" as="font" crossorigin="anonymous"/>
<link rel="preload" href="https://fonts.gstatic.com/s/roboto/v19/KFOmCnqEu92Fr1Mu4mxK.woff2" as="font" crossorigin="anonymous"/>


添加到你的css中。
并使用此方法添加css文件：


<link rel="preload" href="css/style.css" as="style" onload="this.rel='stylesheet'"><noscript><link rel="stylesheet" href="css/style.css"></noscript>





URL不正确
用这个


我终于找到了问题所在。我正在使用一个名为NativeDroid2的Jquery移动主题，它在CSS文件中错误地加载了Roboto字体系列。我只是对url进行了注释，现在效果很好。
OP已经定义了
字体系列
。如果没有定义，字体将不会显示在任何浏览器中。@Pida我知道他导入了字体。但是他在导入声明中没有提到https。OP确实在他的CSS文件中写了
http
，但这与你的答案有什么关系？您没有提到SSL或https，并且删除了代码示例中的那一行。它不起作用，我也有同样的问题。。。事实上，在Mozilla中加载非常完美，但在Chrome中加载需要20秒。现在，它会抛出错误
加载资源失败：net:：ERR_FILE_NOT_FOUND
，我认为我建议的代码不会导致此消息。请看我的答案所附的简短示例。一些解释会很好。为什么在第一个代码示例中有两个
link
标记，为什么在CSS中有一个额外的
src
属性，为什么在第三个代码示例中有更复杂的
link
标记？在我的第一个代码单元中有两个链接，因为它们是从中提取的两种Roboto字体。该链接包含其中七个字母，采用各种字母，例如西里尔字母。这两个是拉丁和拉丁-外部。拉丁包含所有字母数字字符，因此对其他字符单独收费是没有意义的。以这种方式构建的代码是在页面呈现的同时加载字体，最后一个代码单元是异步加载css代码，这样在呈现页面时就不会有延迟。

@font-face {
  font-family: "Roboto";
  src: url("https://fonts.gstatic.com/s/roboto/v19/KFOmCnqEu92Fr1Mu7GxKOzY.woff2") format("woff2"), url("https://fonts.gstatic.com/s/roboto/v19/KFOmCnqEu92Fr1Mu4mxK.woff2") format("woff2")
  font-weight: 400;
  font-display: swap;
  font-style: Roboto; }



<link rel="preload" href="css/style.css" as="style" onload="this.rel='stylesheet'"><noscript><link rel="stylesheet" href="css/style.css"></noscript>



@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:100i,300,300i,400,400i,500,500i,700,700i&display=swap');