如何获取这些Google字体以供离线使用 [英] How to get these google fonts for offline use
问题描述
我正在使用metronic主题来构建我的Web应用程序.在每个页面上，此代码是<head>标记中的第一个:
I'm using metronic theme for building my web application. on each page this code is the first in the <head> tag:
<script>
WebFont.load({
google: {"families":["Poppins:300,400,500,600,700","Roboto:300,400,500,600,700"]},
active: function() {
sessionStorage.fonts = true;
}
});
</script>
我需要从Google获得这些字体，以便可以在本地离线使用它们.我如何获得它们?我应该写什么代码呢?谢谢.
I need to get those fonts from google so that I can use them locally OFFLINE. How Can I get them? What code Should I write instead. Thanks.
推荐答案
我也遇到了同样的问题，但是我通过以下步骤解决了这个问题:
I had also the same problem but I solved it by the following steps:
1)您可能知道，您可以使用googleapi导入google字体，因此首先我要输入适当的网址，例如:
1) As you may know, you can import google fonts by using googleapi, so first of all I maked appropriate url such as:
' https://fonts.googleapis.com/css?family=Roboto: 300,400,500,600,700 '
和
' https://fonts.googleapis.com/css?family=Poppins: 300,400,500,600,700 '
这些网址应返回一个包含字体来源的css文件.
These urls should return a css file that contains source of fonts.
2)将这些文件保存到适当的路径.
2) Save these files to the appropriate path.
3)您需要一个一个地下载'font-face'的'src'中的源URL，然后将其放置在适当的路径中.例如，在以下摘录的CSS上:
3) You need to download source url in 'src' of 'font-face', one by one, and then put it to the appropriate path. For example on the following snipped css:
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 300;
src: local('Poppins Light'), local('Poppins-Light'), url(https://fonts.gstatic.com/s/poppins/v5/pxiByp8kv8JHgFVrLDz8Z11lFc-K.woff2) format('woff2');
unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}
您应该从以下地址下载字体:
You should download the font from the address:
' https://fonts.gstatic.com/s/poppins/v5/pxiByp8kv8JHgFVrLDz8Z11lFc-K.woff2 '
4)最后，根据本地字体文件更正css文件中"src"的"url".
4) Finally correct the 'url' of 'src' in the css file, according to the local font files.
希望有帮助.
这篇关于如何获取这些Google字体以供离线使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
