css - CSS文件中的Google字体https链接

Question

我在我的 CSS 样式表中使用 Google Web 字体，如下所示

@font-face {
 font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
     src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');}

但是当我的网站从受保护的页面转到时，我得到“仅显示受保护的内容”。我使用了谷歌浏览器资源检查器，上面指出的是问题

如何在我的 CSS 文件中添加指向 Google Web 字体的安全链接

谢谢

Answer 1

你不需要@font-face 来使用谷歌字体。

只需将其添加到您的 HTML 代码中：

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

然后在 CSS 中添加字体名称。例子：

body{font-family: 'Open Sans', sans-serif;}

Answer 2

有点旧，但它出现在相关搜索中，因此它可能对某人有用。

我个人将@font-face 声明放在我的样式表中，而不是在头部请求它。只需删除下面的“http：”即可解决问题。

url(//themes.googleusercontent.com/static/fonts/opensans/...) format('woff');

Answer 3

为什么不使用@import 语句？

在您的 css 文件的顶部：

@import url(http://fonts.googleapis.com/css?family=Open+Sans);