Question

我有问题但已经搜索但我无法找到答案。我在我的Wordpress网站（Html5Blank主题）中使用谷歌字体（Playfair Display），但它看起来与谷歌字体非常不同。这是他们在googlefont和my website中看待的方式。

这是我的代码

＆＃13;

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

＆＃13;

<h3>2017</h3>

＆＃13;

Answer 1

这是因为您使用了错误的引号。我想你刚刚复制并粘贴了一些文本文件中的行。

使用font-family: 'Playfair Display', serif;代替font-family: ‘Playfair Display’, serif;

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您的报价方式存在问题 - 使用'Playfair Display'代替‘Playfair Display’

＆＃13;

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

＆＃13;

<h3>2017</h3>

＆＃13;

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

2 个答案: