html - 如何将在线字体链接转换为本地字体链接？

Question

如何将在线字体链接转换为本地字体链接？ (大概下载字体文件就可以了)

例如，来自谷歌字体的 HTML 和 CSS:

HTML:
<link href="https://fonts.googleapis.com/css?family=Oswald|Roboto|Source+Sans+Pro" rel="stylesheet">

CSS:
font-family: 'Roboto', sans-serif;
font-family: 'Oswald', sans-serif;
font-family: 'Source Sans Pro', sans-serif;

或导入样式:

<style>
@import url('https://fonts.googleapis.com/css?family=Oswald|Roboto|Source+Sans+Pro');
</style>

这里的主要目标是:

下载完成后，转为本地。整个网站可以在本地网络中本地服务，无需互联网连接。

Answer 1

您可以从 google web font 寻求帮助 helper 。它确实是一个非常方便的工具，可以下载谷歌字体并在本地安装。

The benefit of this tools and Implementation:

<强>1。它将提供所有格式的字体(.eot、.woff、.woff2、.svg、.ttf)。

<强>2。帮助您使用 css 实现。 它生成所选字体和样式的 css。

   example of css code:
/* open-sans-regular - latin */ 
 @font-face {
      font-family: 'Open Sans';
      font-style: normal;
      font-weight: 400;
      src: url('../fonts/open-sans-v13-latin-regular.eot'); /* IE9 Compat Modes */
      src: local('Open Sans'), local('OpenSans'),
           url('../fonts/open-sans-v13-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('../fonts/open-sans-v13-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
           url('../fonts/open-sans-v13-latin-regular.woff') format('woff'), /* Modern Browsers */
           url('../fonts/open-sans-v13-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
           url('../fonts/open-sans-v13-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
    }

<强>3。手动选择要包含在元素中的所有字体粗细和样式并下载。