修复字体差异答案

【问题标题】：Fixing font difference修复字体差异
【发布时间】：2019-10-06 17:02:34
【问题描述】：

我正在使用这种字体：https://fonts.googleapis.com/css?family=Poppins（Google 字体）。我在<head>标签中将它实现到我的HTML文档中：<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet" type="text/css" />
在我的文本中，我使用这个小 CSS 代码来应用它：

* {
  font-family: 'Poppins', sans-serif;
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
}

在 Chrome 中一切正常。在 Chrome 版本 74.0.3729.157 中看起来像这样：

这是另一个浏览器的样式，例如 microsoft edge 版本 17.17134：
正如你所看到的，有很大的不同。为了设计漂亮的网页，我需要解决这个问题。希望有人可以帮助我解决这个问题。谢谢。 :)
注意：看起来它对于其他浏览器中的 <p> 元素也可以正常工作。但不适用于<h1> 元素。该字体通常应用于<h1> 元素，但由于某种原因，我认为它呈现不同。如何解决这个问题？～菲利普

编辑：
要轻松查看和测试我的问题，请在不同的浏览器（如 chrome 和 edge）中打开这个 jsfiddle：https://jsfiddle.net/filipdg/q1mhcvau/4/

【问题讨论】：

您是否尝试过清除缓存？通常这可以用 CTRL+F5 修复
@SuperDJ 是的，已经尝试过了。不工作。

标签： html css fonts google-webfonts

【解决方案1】：

要解决此问题，请在您的 @font-face 声明中包含 WOFF 格式。大多数现代浏览器都支持WOFF

为了最大限度地支持浏览器，包括所有可能的格式。

@font-face {
    font-family: 'Poppins';
    src: url('Poppins.eot');
    src: url('Poppins.eot?#iefix') format('embedded-opentype'),
       url('Poppins.woff2') format('woff2'),
       url('Poppins.woff') format('woff'), 
       url('Poppins.ttf')  format('truetype'),
       url('Poppins.svg#svgFontName') format('svg');
}

【讨论】：

@Alex G. 有没有办法从谷歌字体在线获取字体，或者我必须下载它并将其保存到我的公众中？
尝试使用它，看看它是否有效：
还有这个：body { font-family: 'Lato', sans-serif; } fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
是的，有可能