Google 字体 "Merriweather" 没有出现在 Chrome 中？

Question

在我的代码顶部我有：

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

在我的 CSS 中我有：

字体系列：'Merriweather'，;

但它没有出现。我不确定原因是什么。它看起来很简单，但没有任何效果。

如有任何帮助，我们将不胜感激。

这是我的 HTML 的顶部：

 <link rel = "stylesheet"
   type = "text/css"
   href = "stylesheet.css" />

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

<head>

<title>Jesse | Personal Chef </title>

  <meta charset="UTF-8">
  <meta name="description" content="Jesse Personal Chef">
  <meta name="keywords" content="Food, Chef, Wilmington, NC, North Carolina Food, In Home Chef, Personal Chef, Chef For Hire, Jesse,">
  <meta name="author" content="Cal & Jen T.">
  <meta name="viewport" content="width=device-width, initial-scale=1">


</head>

这是我的 CSS，保存为 stylesheet.css:

<style>

/* HEADERS ~~~~~~~~~~ */

    h1 {
        font-family: 'Merriweather', ;
        text-align: center;
        font-size: 2.7em;
        color: 000;
        font-weight: 500;
        letter-spacing: 2%;
        line-height: 40px;
        padding-bottom: -100px;
        margin: 2%;

    }

     .subtitle {
        font-family: 'Merriweather', ;
        text-align: center;
        font-size: 1.04em;
        color: 000;
        font-weight: regular;
        margin: 1;
        line-height: 1px;
        padding-bottom: 60px;

    }


</style>

谢谢

Answer 1

检查字体 link：
- 如果您使用 @font-face 规则检查 link 包含字体的文件夹并确保该文件夹中存在字体文件，还要检查 @font-face 规则中的字体名称和font-family 它们必须相等；
- 如果您使用 CDN - 检查 link 到 CDN；
在浏览器中打开 Dev Tools（Ctrl（Command）+ Shift + I）并在“网络”选项卡中检查您的字体是否已下载：https://prnt.sc/r9x8ab；

Answer 2

需要一点修复：

改变这个：

font-family: 'Merriweather', ;

为此：

font-family: 'Merriweather', serif;

serif 部分是故障转移字体，以防找不到 Merriweather。

在此代码段中对其进行测试：

<html>

<head>
  <link href=" https://fonts.googleapis.com/css?family=Merriweather&display=swap" rel="stylesheet" />
  <style>
    div {
      font-family: Merriweather, serif;
    }
  </style>
</head>

<body>
  <div>Test</div>
</body>

</html>

您也可以只将 font-family 样式应用于 <body> 标签，所有子元素都将继承该字体系列。

Google 字体 "Merriweather" 没有出现在 Chrome 中？

Google Font "Merriweather" Is not showing up in Chrome.?

html

css

fonts