Google 字体不适用于 CSS？

Question

我正在处理一个 html 页面，完成了一半，并决定开始设计一些东西。 . .我所有的造型都很好！直到我试图获得 Google 字体。我按照所有说明将所有内容正确插入 css。但是，当我在 Chrome 上查看页面时，它只显示 "fallback" 通用无衬线字体。这是我的 css：

#page-first-open {
 border: 1px solid black;
 width: 1000px;
 height: 500px;
 text-align: center;
 margin: auto;
 position: relative;
 top: 50px;
 
}

@import url(https://fonts.googleapis.com/css?family=Raleway);

#page-first-open p {
 font-size: ;
 font-family: 'Raleway', sans-serif;
 
}

<!DOCTYPE html>
 <html>
  <head>
   <link rel="stylesheet" type="text/css" href="test.css">
   <script>
   </script>
   <title>User Test</title>
  </head>
  <body>
   <div id="wrapper">
    <div id="page-first-open">
     <p>Hello, and welcome to this page. . .<br>
     If you don't mind me asking, <br>
     What is your name (or what you'd like to be called)?</p>
    </div>
   </div>
  </body>
 </html>

有人可以告诉我我做错了什么（如果我做错了），或者指出正确的方向让它工作吗？

Answer 1

在文件顶部包含 @import 指令。

@import url(https://fonts.googleapis.com/css?family=Raleway);
#page-first-open {
 border: 1px solid black;
 width: 1000px;
 height: 500px;
 text-align: center;
 margin: auto;
 position: relative;
 top: 50px;
 
}



#page-first-open p {
 font-size: ;
 font-family: 'Raleway', sans-serif;
 
}

<!DOCTYPE html>
 <html>
  <head>
   <link rel="stylesheet" type="text/css" href="test.css">
   <script>
   </script>
   <title>User Test</title>
  </head>
  <body>
   <div id="wrapper">
    <div id="page-first-open">
     <p>Hello, and welcome to this page. . .<br>
     If you don't mind me asking, <br>
     What is your name (or what you'd like to be called)?</p>
    </div>
   </div>
  </body>
 </html>

Answer 2

尝试在 html 代码的 head 部分添加以下内容，看看它是否解决了问题： <meta charset="UTF-8"> 此外，您需要将@import移动到CSS文件的顶部，这样字体会加载

Answer 3

尝试将导入放在文件的顶部，在任何声明之前。

Answer 4

您可以删除：

@import url(https://fonts.googleapis.com/css?family=Raleway);

并添加：

<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">

致您的<head>。像这样：

<!DOCTYPE html>
    <html>
        <head>
            <link rel="stylesheet" type="text/css" href="test.css">
            <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
            <script>
            </script>
            <title>User Test</title>
        </head>
        <body>
            <div id="wrapper">
                <div id="page-first-open">
                    <p>Hello, and welcome to this page. . .<br>
                    If you don't mind me asking, <br>
                    What is your name (or what you'd like to be called)?</p>
                </div>
            </div>
        </body>
    </html>

Google 字体不适用于 CSS？

Google Font Not Working With CSS?

html

css

google-font-api