我如何在网站上使用谷歌的Roboto字体？
我想在我的网站上使用谷歌的Roboto字体，下面是我的教程：
http://www.maketecheasier.com/use-google-roboto-font-everywhere/2012/03/15
我已经下载了具有如下文件夹结构的文件：
现在我有三个问题：
- 我的
media/css/main.cssurl中有css。那我要把那个文件夹放哪儿？ - 我需要从所有子文件夹中提取所有eot、svg等并放入
fonts文件夹吗？ - 是否需要创建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
回答 14
Stack Overflow用户
发布于 2013-08-12 02:52:21
你真的不需要这么做。
- 去谷歌的网页字体页
- 在右上角的搜索框中搜索
Roboto - 选择要使用的字体的变体。
- 单击顶部的“选择此字体”并选择所需的权重和字符集。
该页面将为您提供一个要包含在页面中的<link>元素，以及要在您的CSS中使用的示例font-family规则列表。
通过这种方式使用Google的字体可以保证可用性，并减少到您自己服务器的带宽。
Stack Overflow用户
发布于 2014-06-17 22:32:07
有两种方法可以在页面上使用许可的web字体：
1.字体托管服务，如Typekit、Fonts.com、Fontdeck等。
这些服务为设计人员提供了一个简单的界面，可以管理购买的字体，并生成一个指向提供字体的动态CSS或JavaScript文件的链接。谷歌甚至免费提供这项服务(这里是您所要求的Roboto字体的一个例子)。
像谷歌和Typekit使用的JS字体加载器(即WebFont加载器)提供CSS类和回调，以帮助管理可能发生的失足，或者在下载字体时响应超时。
<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>2. DIY方法
这涉及到获得许可用于web使用的字体，以及(可选)使用一个工具，如FontSquirrel的生成器(或一些软件)来优化其文件大小。然后，使用标准@font-face CSS属性的跨浏览器实现来启用字体。
这种方法可以提供更好的加载性能，因为您可以对要包含的字符以及文件大小进行更细粒度的控制。
/* 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;
}TLDR;
有两个主要的方法嵌入自定义字体到您的网站。使用字体托管服务和@字体面声明在总体性能、兼容性和可用性方面提供了最好的输出。
资料来源：https://www.artzstudio.com/2012/02/web-font-performance-weighing-fontface-options-and-alternatives/ (链接已死)
更新
Roboto: Google的签名字体现在是开源的。现在您可以使用可以找到这里的指令手动生成Roboto字体。
Stack Overflow用户
发布于 2016-06-13 09:57:02
老职位，我知道。
使用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, body, html * {
font-family: 'Roboto', sans-serif;
}https://stackoverflow.com/questions/18178867
复制相似问题
腾讯云开发者
