如何在网站上使用谷歌的Roboto字体？

Question

我想在我的网站上使用谷歌的Roboto字体，我正在遵循这个教程：

http://www.maketecheasier.com/use-google-roboto-font-everywhere/2012/03/15

我下载了一个文件夹结构如下的文件：

现在我有三个问题：

1. 我的media/css/main.cssURL中有css。那么我需要将文件夹放在哪里？
2. 我是否需要从所有子文件夹中提取所有eot、svg等，并将其放入字体文件夹？
3. 是否需要创建css文件fonts.css并将其包含在基本模板文件中？

他用的例子

@font-face {
    font-family: 'Roboto';
    src: url('Roboto-ThinItalic-webfont.eot');
    src: url('Roboto-ThinItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-ThinItalic-webfont.woff') format('woff'),
         url('Roboto-ThinItalic-webfont.ttf') format('truetype'),
         url('Roboto-ThinItalic-webfont.svg#RobotoThinItalic') format('svg'); (under the Apache Software License). 
    font-weight: 200;
    font-style: italic;
}

如果我想拥有如下的dir结构，那么我的url应该是什么样子的：

/media/fonts/roboto

Answer 1

你真的不需要做这些。

• 转到Google的Web字体页面
• 在右上方的搜索框中搜索Roboto
• 选择要使用的字体变体
• 单击顶部的“选择此字体”并选择所需的粗细和字符集。

该页面将提供一个 元素以包含在页面中，并提供一个示例font-family规则列表以在CSS中使用。

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