WordPress中Playfair Display字体与Google Fonts显示不一致求助

嘿，我之前也碰到过类似的字体显示偏差问题，咱们一步步来排查修复：

1. 先解决最可能的核心问题：错误的引号格式 #

你代码里的font-family: ‘Playfair Display’, serif;用了中文引号，浏览器没法正确识别这个字体名称，会直接 fallback 到系统默认的serif字体，这大概率就是显示和Google Fonts上不一样的主要原因。把中文引号换成英文单引号或双引号就行：

h3 {
  display: inherit;
  white-space: nowrap;
  font-family: 'Playfair Display', serif; /* 替换成英文引号 */
  font-size: 10vw;
  font-weight: 400;
  text-decoration: none;
  margin: 0;
  color: #F4512C;
}

2. 优化字体加载的语法 #

你的@import语句可以换成更规范的CSS2写法，同时加上display=swap优化字体加载时的体验，避免页面闪烁：

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=Roboto:wght@100;300&display=swap');

这样能确保你需要的400权重字体被正确加载。

3. 排查主题默认样式的干扰 #

Html5Blank主题可能有全局的字体重置或继承规则，你可以给h3加更具体的选择器来提高样式优先级（尽量少用!important，优先靠选择器 specificity 来覆盖）：

/* 假设h3在文章内容容器里，根据你站点的实际结构调整选择器 */
.post-content h3 {
  font-family: 'Playfair Display', serif;
  font-weight: 400;
}

4. 统一浏览器字体渲染效果 #

不同浏览器对字体的默认渲染逻辑有差异，你可以加上这些属性来让显示更一致：

h3 {
  /* 其他样式保持不变 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

先试试替换引号这个最简单的操作，应该能解决大部分显示差异！如果还是有问题，可以打开浏览器开发者工具，在Network面板检查字体文件是否成功加载，或者在Elements面板查看h3实际应用的字体是什么。

内容的提问来源于stack exchange，提问作者Bruno Carvalho