谷歌字体“Merriweather”没有出现在 Chrome 中。？
Posted
技术标签:
【中文标题】谷歌字体“Merriweather”没有出现在 Chrome 中。？【英文标题】：Google Font "Merriweather" Is not showing up in Chrome.? 【发布时间】：2020-06-14 01:56:20 【问题描述】：在我的代码顶部我有：
https://fonts.googleapis.com/css?family=Merriweather&display=swap" rel="stylesheet" >
在我的 CSS 中，我有：
font-family: '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>
谢谢
【问题讨论】：
您可能需要提供更多代码，例如您的CSS Selector，因为我们不知道这是否适用于提供的代码。尝试显示复制问题所需的所有代码。
【参考方案1】：
需要一点修复：
改变这个：
font-family: 'Merriweather', ;
到这里：
font-family: 'Merriweather', serif;
serif 部分是故障转移字体，以防找不到 Merriweather。
在这个 sn-p 中测试它：
<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> 标记，所有子元素都将继承该字体系列。
【讨论】：
太好了！请点击答案旁边的复选标记接受答案。【参考方案2】：-
检查字体链接：
如果您使用
@font-face 规则检查字体文件夹的链接并确保该文件夹中存在字体文件，还要检查@font-face 规则和font-family 中的字体名称，它们必须相等；李>
如果您使用 CDN - 检查 CDN 的链接；
在浏览器中打开开发工具（Ctrl(Command) + Shift + I）并在选项卡网络中检查您的字体是否已下载：https://prnt.sc/r9x8ab;
【讨论】：
以上是关于谷歌字体“Merriweather”没有出现在 Chrome 中。？的主要内容，如果未能解决你的问题，请参考以下文章