src直接指向字体文件，因此如果你把它们都放在/media/fonts/roboto上，你应该像这样在main.css中引用它们: src: url(. . /字体/ roboto / Roboto-ThinItalic-webfont.eot);

. .向上移动一个文件夹，这意味着如果main.css在/media/css文件夹中，则指向media文件夹。

你必须使用..在CSS中的所有url引用中使用/fonts/roboto/(并确保文件在这个文件夹中，而不是在子目录中，如roboto_black_macroman)。

基本上(回答你的问题):

我有css在我的media/css/main.css url。我需要把这个文件夹放在哪里

你可以把它留在那里，但一定要使用src: url('../fonts/roboto/

我需要提取所有的eot,svg等从所有子文件夹，并放在字体文件夹

如果你想直接引用这些文件(而不是在CSS代码中放置子目录)，那么是。

我需要创建css文件fonts.css和包括在我的基本模板文件

不一定，你可以将这些代码包含在main.css中。但是将字体与自定义CSS分开是一个很好的做法。

下面是一个我使用的字体LESS/CSS文件的例子:

@ttf: format('truetype');

@font-face {
  font-family: 'msb';
  src: url('../font/msb.ttf') @ttf;
}
.msb {font-family: 'msb';}

@font-face {
  font-family: 'Roboto';
  src: url('../font/Roboto-Regular.ttf') @ttf;
}
.rb {font-family: 'Roboto';}
@font-face {
  font-family: 'Roboto Black';
  src: url('../font/Roboto-Black.ttf') @ttf;
}
.rbB {font-family: 'Roboto Black';}
@font-face {
  font-family: 'Roboto Light';
  src: url('../font/Roboto-Light.ttf') @ttf;
}
.rbL {font-family: 'Roboto Light';}

(在这个例子中，我只使用ttf) 然后我使用@import "fonts";在我的主要。less文件(less是一个CSS预处理器，它让事情变得更简单)

其实很简单。去谷歌的网站上的字体，并添加它的链接到每页的头部，你想包括字体。

src直接指向字体文件，因此如果你把它们都放在/media/fonts/roboto上，你应该像这样在main.css中引用它们: src: url(. . /字体/ roboto / Roboto-ThinItalic-webfont.eot);

. .向上移动一个文件夹，这意味着如果main.css在/media/css文件夹中，则指向media文件夹。

你必须使用..在CSS中的所有url引用中使用/fonts/roboto/(并确保文件在这个文件夹中，而不是在子目录中，如roboto_black_macroman)。

基本上(回答你的问题):

我有css在我的media/css/main.css url。我需要把这个文件夹放在哪里

你可以把它留在那里，但一定要使用src: url('../fonts/roboto/

我需要提取所有的eot,svg等从所有子文件夹，并放在字体文件夹

如果你想直接引用这些文件(而不是在CSS代码中放置子目录)，那么是。

我需要创建css文件fonts.css和包括在我的基本模板文件

不一定，你可以将这些代码包含在main.css中。但是将字体与自定义CSS分开是一个很好的做法。

下面是一个我使用的字体LESS/CSS文件的例子:

@ttf: format('truetype');

@font-face {
  font-family: 'msb';
  src: url('../font/msb.ttf') @ttf;
}
.msb {font-family: 'msb';}

@font-face {
  font-family: 'Roboto';
  src: url('../font/Roboto-Regular.ttf') @ttf;
}
.rb {font-family: 'Roboto';}
@font-face {
  font-family: 'Roboto Black';
  src: url('../font/Roboto-Black.ttf') @ttf;
}
.rbB {font-family: 'Roboto Black';}
@font-face {
  font-family: 'Roboto Light';
  src: url('../font/Roboto-Light.ttf') @ttf;
}
.rbL {font-family: 'Roboto Light';}

(在这个例子中，我只使用ttf) 然后我使用@import "fonts";在我的主要。less文件(less是一个CSS预处理器，它让事情变得更简单)

这就是我在不使用CDN的情况下获得静态部署所需的woff2文件所做的工作

临时添加cdn的css加载roboto字体到index.html，让页面加载。 从谷歌开发工具查看来源和展开fonts.googleapis.com节点，并查看css的内容?family=Roboto:300,400,500&display=交换文件并复制内容。将这些内容放在assets目录下的css文件中。

在css文件中，删除所有的希腊文，克里利克文和越南文。

看看这个css文件中类似的行:

    src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fBBc4.woff2) format('woff2');

复制链接地址并粘贴到浏览器中，它将下载字体。把这个字体放到你的assets文件夹中，在这里重命名它，在css文件中也是如此。对其他链接也这样做，我有6个独特的woff2文件。

对于材质图标，我遵循了相同的步骤。

现在返回并注释您调用cdn的行，而不是使用您创建的新css文件。

你真的不需要做这些。

去谷歌的网页字体页面 在右上方的搜索框中搜索Roboto 选择要使用的字体的变体 点击顶部的“选择此字体”，选择你需要的权重和字符集。

该页面将为您提供一个<link>元素，以包含在您的页面中，以及一个示例字体家族规则列表，以用于您的CSS。

以这种方式使用谷歌的字体可以保证可用性，并减少您自己服务器的带宽。

老帖子了，我知道。

这也可以使用CSS @import url:

@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300ita‌​lic,400italic,500,500italic,700,700italic,900italic,900);
html, body, html * {
  font-family: 'Roboto', sans-serif;
}