包括 google webfont 不工作

Question

我正在尝试使用 google 字体，如下所示：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <!-- <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,300italic,400italic,700,700italic' rel='stylesheet' type='text/css'> -->
    <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,300italic,400italic,700,700italic' rel='stylesheet' type='text/css'>
    <style>
        body {
            font-size: 2em;
            font-family: 'Source Sans Pro', serif;
            font-style: normal;
            font-weight: 300;
        }
    </style>
</head>
<body>
    <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</div>
</body>
</html>

如您所见，我已按照 this Whosebug answer 中的建议尝试使用 http 和 https，但似乎没有任何效果。

我做错了什么吗？

您还可以看到该字体采用后备 serif 字体。现在为什么 line-height 在删除甚至不使用的字体时发生变化？

我正在使用 Google Chrome 版本：52.0.2743.116

真正的问题是：如何包含 google 字体？

因为它似乎是从开发工具加载的

Answer 1

尝试以隐身模式打开网站，可能某些浏览器插件干扰了您的代码。我已经根据您的代码创建了一个 jsbin，它工作得很好，我还将它保存在我的硬盘上，它也可以工作。检查了与您的 Chrome 完全相同的版本。

编辑：问题已解决。经过一些调查和反复试验，事实证明，为了使它适用于 Caramba，他必须修改正文样式中的字体系列，使其包含三个逗号分隔值才能起作用，所以

font-family: 'Source Sans Pro', serif;

没用，而

font-family: 'Source Sans Pro', Helvetica, serif;

做了。

包括 google webfont 不工作

Included google webfont not working

html

css

fonts

webfonts

google-webfonts