下载Google字体并设置使用它的离线网站

小编典典

下载Google字体并设置使用它的离线网站

css

我有一个模板，它具有对Google字体的引用，如下所示：

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

如何下载并设置它以始终在离线运行的页面中使用？

阅读 773

2020-05-16

共1个答案

小编典典

只需转到Google字体-http:
//www.google.com/fonts/，将您喜欢的字体添加到收藏夹，然后按下载按钮。然后只需使用@fontface将此字体连接到您的网页即可。顺便说一句，如果打开您正在使用的链接，您将看到一个使用@fontface的示例。

http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300

举个例子

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

只需将URL地址更改为已下载的字体文件上的本地链接即可。

您可以更轻松地做到这一点。

只需下载文件，您已链接：

http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300

将其命名为opensans.css左右。

然后只需将url（）中的链接更改为字体文件的路径即可。

然后将示例字符串替换为：

<link href='opensans.css' rel='stylesheet' type='text/css'>

2020-05-16