Question

我正在使用以下字体：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>元素上，但是由于某些原因，我认为它呈现出不同的效果。如何解决这个问题？〜filip

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

Answer 1

要解决此问题，请在WOFF声明中加入@font-face格式。大多数现代浏览器都支持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');
}

修复字体差异

1 个答案: