Google 字体 CDN：字体粗细未按预期显示

Question

我正在尝试在我的站点中使用 Google 字体中的 Lato。我在fonts.google.com上看到，Lato的字体粗细很明显，区别很明显：

https://fonts.google.com/specimen/Lato

实际上，我没有发现它们之间有太大区别，这让我的网站设计变得复杂。

谁能告诉我是否正确使用了 Lato 和字体粗细，或者告诉我如何使用字体粗细？

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
  <link href="https://fonts.googleapis.com/css?family=Lato|Open+Sans:500,600,700,800" rel="stylesheet">
</head>

<style>
  body {
    font-family: 'Lato', sans-serif
  }
</style>

<body>
  <div style="font-weight:500">This is a test!</div>
  <div style="font-weight:600">This is a test!</div>
  <div style="font-weight:700">This is a test!</div>
  <div style="font-weight:800">This is a test!</div>
</body>

Answer 1

感谢 Andrew Li，我意识到我为 Open Sans 而不是 Lato 添加了字体粗细。这是一个固定的 Plunkr：

https://plnkr.co/edit/9mKXYie2BdMvkf3uuvgn

修复是：

<link href="https://fonts.googleapis.com/css?family=Lato:400,700,900" rel="stylesheet">

Google 字体 CDN：字体粗细未按预期显示

Google font CDN: font weights not displaying as expected

css

fonts

google-fonts