我正在尝试渲染我的网站,我在Google Chrome浏览器中花费了很多时间,但是在Mozilla中却完美地工作了。控制台显示错误
GET file://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic net::ERR_FILE_NOT_FOUND
我试图直接在CSS和HTML中导入以下内容:
@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>
答案 0 :(得分:2)
导入Google字体的标准方法是在HTML的link
部分中放置一个head
标记:
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
至少在过去,使用@import
包含较大的文件(字体文件非常大)时会出现问题,因为浏览器在继续呈现页面之前会等待文件下载完成。
您的描述给人的印象是Firefox有所改善,但Chrome却没有。
因此,我建议您在HTML文件的link
中加入head
标记,删除style
标记,并从CSS中删除以@import
开头的行。 / p>
当OP报告一条错误消息时,我附上一个简短的示例:
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<style>
body {
font-family:'Roboto'
}
</style>
</head>
<body>
<h1>Test</h1>
</body>
</html>
答案 1 :(得分:0)
添加此内容:
<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"/>
转到您的<head>
部分。
这:
@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; }
添加到您的CSS中。 并使用以下方法添加css文件:
<link rel="preload" href="css/style.css" as="style" onload="this.rel='stylesheet'"><noscript><link rel="stylesheet" href="css/style.css"></noscript>
答案 2 :(得分:0)
URL不正确 用这个
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:100i,300,300i,400,400i,500,500i,700,700i&display=swap');
答案 3 :(得分:0)
最后我找到了问题。我正在使用一个名为NativeDroid2的Jquery Mobile主题,它在CSS文件中错误地加载了Roboto字体系列。我只是评论了网址,现在可以正常使用了。
答案 4 :(得分:-1)
您只需要在font-family: 'Roboto', sans-serif;
或CSS
标签中定义body
。
<!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');
body {
font-family: 'Roboto', sans-serif;
}
</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>
body {
font-family: 'Roboto', sans-serif;
}
我尝试过。工作正常!