字体在 wordpress 中看起来与在 google 字体中不同

Question

我遇到了问题，已经进行了搜索，但找不到答案。我在我的 Wordpress 站点（Html5Blank 主题）中使用 google 字体（Playfair Display），但它看起来与 google 字体中的非常不同。这就是他们在 googlefont and 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;
}

<h3>2017</h3>

Answer 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>

Answer 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;
}

<h3>2017</h3>

字体在 wordpress 中看起来与在 google 字体中不同

Font looks different in wordpress that in google fonts

css

wordpress

fonts

google-fonts