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预处理器，它让事情变得更简单)

很容易

你下载的每个文件夹都有不同的roboto字体，这意味着它们是不同的字体

操作:roboto_regular_macroman

使用它们中的任何一个:

1-解压文件夹的字体你想使用

2-上传到CSS文件附近

3-现在包括在CSS文件

示例:包含名为"roboto_regular_macroman"的字体:

@font-face {
font-family: 'Roboto';
src: url('roboto_regular_macroman/Roboto-Regular-webfont.eot');
src: url('roboto_regular_macroman/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
     url('roboto_regular_macroman/Roboto-Regular-webfont.woff') format('woff'),
     url('roboto_regular_macroman/Roboto-Regular-webfont.ttf') format('truetype'),
     url('roboto_regular_macroman/Roboto-Regular-webfont.svg#RobotoRegular') format('svg');
font-weight: normal;
font-style: normal;
}

注意文件的路径，这里我上传了一个名为“roboto_regular_macroman”的文件夹，与CSS所在的文件夹相同

那么你现在只需输入font-family: 'Roboto'就可以使用字体了;

老帖子了，我知道。

这也可以使用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;
}

花了一个小时，解决了字体问题。

相关答案-以下是React.js网站:

Install the npm module: npm install --save typeface-roboto-mono import in .js file you want to use one of the below: import "typeface-roboto-mono"; // if import is supported require('typeface-roboto-mono') // if import is not supported For the element you can use one of the below: fontFamily: "Roboto Mono, Menlo, Monaco, Courier, monospace", // material-ui font-family: Roboto Mono, Menlo, Monaco, Courier, monospace; /* css */ style="font-family:Roboto Mono, Menlo, Monaco, Courier, monospace;font-weight:300;" /*inline css*/

希望这能有所帮助。

试试这个

<style>
@font-face {
        font-family: Roboto Bold Condensed;
        src: url(fonts/Roboto_Condensed/RobotoCondensed-Bold.ttf);
}
@font-face {
         font-family:Roboto Condensed;
        src: url(fonts/Roboto_Condensed/RobotoCondensed-Regular.tff);
}

div1{
    font-family:Roboto Bold Condensed;
}
div2{
    font-family:Roboto Condensed;
}
</style>
<div id='div1' >This is Sample text</div>
<div id='div2' >This is Sample text</div>

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