wordpress 中的字体与 google 字体中的字体不同答案

【问题标题】：Font looks different in wordpress that in google fontswordpress 中的字体与 google 字体中的字体不同
【发布时间】：2018-06-24 02:36:18
【问题描述】：

我遇到了问题并且已经在搜索，但我找不到答案。我在我的 Wordpress 网站（Html5Blank 主题）中使用了谷歌字体（Playfair Display），但它看起来与谷歌字体中的非常不同。这就是他们在googlefont 和my website 中的样子。

这是我的代码

@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,700,900|Roboto:100,300');

h3 {
  display: inherit;
  white-space: nowrap;
  font-family: ‘Playfair Display’, serif;
  font-size: 10vw;
  font-weight: 400;
  text-decoration: none;
  margin: 0;
  color: #F4512C;
}

&lt;h3&gt;2017&lt;/h3&gt;

【问题讨论】：

在控制台中检查时的风格如何？
我认为您在这里没有使用正确的引号：“‘Playfair Display’”应该是“Playfair Display”
这是控制台 h3 { display: inherit;空白：nowrap； font-family: "'Playfair Display'", serif;字体大小：1.5vw；字体粗细：400；颜色：RGB（244、81、44）；文字装饰：无；边距：0px； }
感谢@br.julien，这就是问题所在！顺便说一句，我是新来的，所以我如何查看你的答案？
更改字体系列：'Playfair Display'，衬线； to font-family: 'Playfair Display', serif;

标签： css wordpress fonts google-fonts

【解决方案1】：

这是因为您使用了错误的引号。我认为您刚刚从某个文本文件中复制并粘贴了该行。

使用font-family: 'Playfair Display', serif; 而不是font-family: ‘Playfair Display’, serif;

@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,700,900|Roboto:100,300');
h3 {
  display: inherit;
  white-space: nowrap;
  font-family: 'Playfair Display', serif;
  font-size: 80px;
  font-weight: 400;
  text-decoration: none;
  margin: 0;
  color: #F4512C;
}

<div class="parent-class">
  <h3>2017</h3>
<div>

【讨论】：

【解决方案2】：

您的报价风格存在问题 - 使用 'Playfair Display' 而不是 ‘Playfair Display’

@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,700,900|Roboto:100,300');

h3 {
  display: inherit;
  white-space: nowrap;
  font-family: 'Playfair Display', serif;
  font-size: 10vw;
  font-weight: 400;
  text-decoration: none;
  margin: 0;
  color: #F4512C;
}

&lt;h3&gt;2017&lt;/h3&gt;

【讨论】：