如何在网站上使用Google的Roboto字体？
我想在我的网站上使用Google的Roboto字体，我正在学习本教程：
http://www.maketecheasier.com/use-google-roboto-font-everywhere/2012/03/15
我已经下载了这样的文件夹结构的文件：
现在我有三个问题：
- 我有我的
media/css/main.cssurl的media/css/main.css。 那么我需要把那个文件夹放在哪里？ - 我是否需要从所有子文件夹中提取所有的eot，svg等，并放在
fonts文件夹？ - 我是否需要创buildcss文件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; }
我的url应该是什么样子，如果我想要像这样的dir结构：
/media/fonts/roboto
你不需要做任何这个。 转到Google的Web字体页面，然后在右上angular的search框中searchRoboto 。 select要使用的字体的变体，点击底部的“使用”，然后select所需的权重和字符集。
该页面将为您提供一个<link>元素以包含在您的页面中，以及您在CSS中使用的示例“font-family”规则列表。
使用谷歌的字体保证可用性，并减less带宽到自己的服务器。
有两种方法可以在您的网页上使用许可的网页字体：
-
字体托pipe服务（如Typekit，Fonts.com，Fontdeck等）为devise人员提供了一个易于使用的界面，用于pipe理购买的字体，并生成链接到提供字体的dynamicCSS或JavaScript文件。 Google甚至免费提供这项服务（ 这里是您要求的Roboto字体的一个例子）。 Typekit是唯一提供额外字体提示的服务，以确保字体在不同浏览器中占用相同的像素。
像谷歌和Typekit（即WebFont加载器）使用的JS字体加载器提供CSS类和callback来帮助pipe理可能发生的FOUT ，或者在下载字体时响应超时。
<head> <!-- get the required files from 3rd party sources --> <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'> <!-- use the font --> <style> body { font-family: 'Roboto', sans-serif; font-size: 48px; } </style> </head>
-
DIY方法涉及获取授权给web使用的字体，并且（可选地）使用FontSquirrel的生成器（或一些软件）的工具来优化其文件大小。 然后，使用标准
@font-faceCSS属性的跨浏览器实现来启用字体。这种方法可以提供更好的负载性能，因为您可以更细化地控制要包含的字符，从而更好地控制文件大小。
/* get the required local files */ @font-face { font-family: 'Roboto'; src: url('roboto.eot'); /* IE9 Compat Modes */ src: url('roboto.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('roboto.woff') format('woff'), /* Modern Browsers */ url('roboto.ttf') format('truetype'), /* Safari, Android, iOS */ url('roboto.svg#svgFontName') format('svg'); /* Legacy iOS */ } /* use the font */ body { font-family: 'Roboto', sans-serif; font-size: 48px; }
长话短说：
字体托pipe服务与@ font-face声明一起使用可以在整体性能，兼容性和可用性方面提供最佳的输出。
资料来源： http : //www.artzstudio.com/2012/02/web-font-performance-weighing-fontface-options-and-alternatives/
UPDATE
Roboto：Google的签名字体现在是开源的
您现在可以使用可在此处find的说明手动生成Roboto字体。
老职位，我知道。
这也可以使用CSS @import url ：
@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900); html, html * { font-family: Roboto; }
src直接指向字体文件，因此如果你把它们全部放在/media/fonts/roboto你应该在你的main.css中引用它们： src: url('../fonts/roboto/Roboto-ThinItalic-webfont.eot');
..将一个文件夹向上，这意味着如果main.css位于/media/css文件夹中，则指的是media文件夹。
你必须在CSS中的所有URL引用中使用../fonts/roboto/ （并确保这些文件在这个文件夹中，而不是在子目录中，比如roboto_black_macroman ）。
基本上（回答你的问题）：
我有我的媒体/ CSS / main.cssurl的CSS。 那么我需要把那个文件夹放在哪里
你可以把它留在那里，但一定要使用src: url('../fonts/roboto/
我是否需要从所有子文件夹中提取所有的eot，svg等，并放入字体文件夹
如果你想直接引用这些文件（不要把子目录放在你的CSS代码中），那么是的。
我是否需要创buildcss文件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"; 在我的main.less文件（ less一个CSS预处理器，它使这样的事情更容易一点 ）
您是否阅读过该zip文件中的How_To_Use_Webfonts.html？
看完之后，似乎每个字体子文件夹都有一个已经创build好的.css文件，你可以使用这个文件：
<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />
这很容易
您下载的每个文件夹都有不同的roboto字体，意味着它们是不同的字体
例如：“roboto_regular_macroman”
使用它们中的任何一个：
1-提取您要使用的字体的文件夹
2-附近的CSSfile upload
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; }
注意文件的path，在这里我上传了一个名为“roboto_regular_macroman”的文件夹，在同一个文件夹中的CSS是
那么你现在可以通过inputfont-family: 'Roboto';来简单地使用这个字体font-family: 'Roboto';
尝试这个
<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>
在CSS样式表中使用字体types名称之前的/ fonts /或/ font / 。 我面对这个错误，但之后，它的工作正常。
@font-face { font-family: 'robotoregular'; src: url('../fonts/Roboto-Regular-webfont.eot'); src: url('../fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/Roboto-Regular-webfont.woff') format('woff'), url('../fonts/Roboto-Regular-webfont.ttf') format('truetype'), url('../fonts/Roboto-Regular-webfont.svg#robotoregular') format('svg'); font-weight: normal; font-style: normal; }
