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

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帮助者那里获得帮助。它非常便于下载谷歌字体和在本地安装。

  

此工具和实施的好处：

<强> 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。手动选择要包含在项目中的所有字体粗细和样式并下载它们。

Answer 2

您必须下载字体文件并在css中声明它：

@font-face { font-family: Roboto; src: url('Roboto.otf'); }