Question

我试图像这样使用谷歌字体：

<!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>

正如您所看到的那样http和https按照this stackoverflow answer的建议进行了尝试，但似乎没有任何效果。

我做错了什么？

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

我使用的是谷歌浏览器版本：52.0.2743.116

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

因为它似乎是从开发工具

加载的

Answer 1

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

修改：问题已解决。经过一些调查和反复试验，结果是为了使其适用于Caramba，他必须从体型修改font-family以包含三个以逗号分隔的值，以便工作，所以

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

没有用，而

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

一样。

包含谷歌webfont无法正常工作

1 个答案: