我想在我的网站上使用谷歌的Roboto字体，我正在遵循这个教程:
http://www.maketecheasier.com/use-google-roboto-font-everywhere/2012/03/15
我下载了一个文件夹结构如下所示的文件:
现在我有三个问题:
我有css在我的media/css/main.css url。我需要把文件夹放在哪里呢?
我需要提取所有的eot,svg等从所有子文件夹，并放在字体文件夹?
我需要创建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;
}
我的url应该是什么样的，如果我想有dir结构像:
/media/fonts/roboto
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'就可以使用字体了;
有两种方法，你可以采取在你的网页上使用授权网页字体:
1. 字体托管服务，如Typekit, Fonts.com, Fontdeck等。
这些服务为设计人员提供了一个简单的界面来管理所购买的字体，并生成指向提供字体的动态CSS或JavaScript文件的链接。谷歌甚至免费提供这项服务(这里是你要求的Roboto字体的一个例子)。
JS字体加载器，如谷歌和Typekit使用的字体加载器(即WebFont加载器)提供CSS类和回调来帮助管理可能发生的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>
2. DIY方法
这包括获得字体的网络使用许可，并(可选地)使用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;
在你的网站上嵌入自定义字体有两种主要方法。使用字体托管服务和@font-face声明可以在整体性能、兼容性和可用性方面提供最佳输出。
来源:https://www.artzstudio.com/2012/02/web-font-performance-weighing-fontface-options-and-alternatives/(链接无效)
更新
Roboto:谷歌的签名字体现在是开源的。您现在可以手动生成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, body, html * {
font-family: 'Roboto', sans-serif;
}
对于网站，您可以使用“Roboto”字体如下:
如果你已经创建了单独的css文件，那么在css文件的顶部放置以下行:
@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i');
或者如果你不想创建单独的文件，那么在<style>…</style>:
<style>
@import url('https://fonts.googleapis.com/css?
family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i');
</style>
然后:
html, body {
font-family: 'Roboto', sans-serif;
}
这就是我在不使用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文件。
花了一个小时，解决了字体问题。
相关答案-以下是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*/
希望这能有所帮助。
用css:
@font-face {
font-family: 'Roboto';
src: url('../font/Roboto-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
/* etc, etc. */
萨斯:
@font-face
font-family: 'Roboto'
src: local('Roboto'), local('Roboto-Regular'), url('../fonts/Roboto-Regular.ttf') format('truetype')
font-weight: normal
font-style: normal
@font-face
font-family: 'Roboto'
src: local('Roboto Bold'), local('Roboto-Bold'), url('../fonts/Roboto-Bold.ttf') format('truetype')
font-weight: bold
font-style: normal
@font-face
font-family: 'Roboto'
src: local('Roboto Italic'), local('Roboto-Italic'), url('../fonts/Roboto-Italic.ttf') format('truetype')
font-weight: normal
font-style: italic
@font-face
font-family: 'Roboto'
src: local('Roboto BoldItalic'), local('Roboto-BoldItalic'), url('../fonts/Roboto-BoldItalic.ttf') format('truetype')
font-weight: bold
font-style: italic
@font-face
font-family: 'Roboto'
src: local('Roboto Light'), local('Roboto-Light'), url('../fonts/Roboto-Light.ttf') format('truetype')
font-weight: 300
font-style: normal
@font-face
font-family: 'Roboto'
src: local('Roboto LightItalic'), local('Roboto-LightItalic'), url('../fonts/Roboto-LightItalic.ttf') format('truetype')
font-weight: 300
font-style: italic
@font-face
font-family: 'Roboto'
src: local('Roboto Medium'), local('Roboto-Medium'), url('../fonts/Roboto-Medium.ttf') format('truetype')
font-weight: 500
font-style: normal
@font-face
font-family: 'Roboto'
src: local('Roboto MediumItalic'), local('Roboto-MediumItalic'), url('../fonts/Roboto-MediumItalic.ttf') format('truetype')
font-weight: 500
font-style: italic
/* Roboto-Regular.ttf 400 */
/* Roboto-Bold.ttf 700 */
/* Roboto-Italic.ttf 400 */
/* Roboto-BoldItalic.ttf 700 */
/* Roboto-Medium.ttf 500 */
/* Roboto-MediumItalic.ttf 500 */
/* Roboto-Light.ttf 300 */
/* Roboto-LightItalic.ttf 300 */
/* https://fonts.google.com/specimen/Roboto#standard-styles */
/* -- Roboto-Family -- */
@font-face {
font-family: 'Roboto';
src: url('./fonts/Roboto/Roboto-Thin.woff') format('woff'), url('./fonts/Roboto/Roboto-Thin.ttf') format('truetype');
font-weight: 100;
font-style: normal;
}
@font-face {
font-family: 'Roboto';
src: url('./fonts/Roboto/Roboto-ThinItalic.woff') format('woff'), url('./fonts/Roboto/Roboto-ThinItalic.ttf') format('truetype');
font-weight: 100;
font-style: italic;
}
@font-face {
font-family: 'Roboto';
src: url('./fonts/Roboto/Roboto-Light.woff') format('woff'), url('./fonts/Roboto/Roboto-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'Roboto';
src: url('./fonts/Roboto/Roboto-Regular.woff') format('woff'), url('./fonts/Roboto/Roboto-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Roboto';
src: url('./fonts/Roboto/Roboto-Italic.woff') format('woff'), url('./fonts/Roboto/Roboto-Italic.ttf') format('truetype');
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: 'Roboto';
src: url('./fonts/Roboto/Roboto-Medium.woff') format('woff'), url('./fonts/Roboto/Roboto-Medium.ttf') format('truetype');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'Roboto';
src: url('./fonts/Roboto/Roboto-MediumItalic.woff') format('woff'), url('./fonts/Roboto/Roboto-MediumItalic.ttf') format('truetype');
font-weight: 500;
font-style: italic;
}
@font-face {
font-family: 'Roboto';
src: url('./fonts/Roboto/Roboto-Bold.woff') format('woff'), url('./fonts/Roboto/Roboto-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'Roboto';
src: url('./fonts/Roboto/Roboto-Black.woff') format('woff'), url('./fonts/Roboto/Roboto-Black.ttf') format('truetype');
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: 'Roboto';
src: url('./fonts/Roboto/Roboto-BlackItalic.woff') format('woff'), url('./fonts/Roboto/Roboto-BlackItalic.ttf') format('truetype');
font-weight: 900;
font-style: italic;
}
/* -- Roboto-Condensed-Family -- */
@font-face {
font-family: 'Roboto Condensed';
src: url('./fonts/Roboto/RobotoCondensed-Bold.woff') format('woff'), url('./fonts/Roboto/RobotoCondensed-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'Roboto Condensed';
src: url('./fonts/Roboto/RobotoCondensed-BoldItalic.woff') format('woff'), url('./fonts/Roboto/RobotoCondensed-BoldItalic.ttf') format('truetype');
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: 'Roboto Condensed';
src: url('./fonts/Roboto/RobotoCondensed-Light.woff') format('woff'), url('./fonts/Roboto/RobotoCondensed-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'Roboto Condensed';
src: url('./fonts/Roboto/RobotoCondensed-LightItalic.woff') format('woff'), url('./fonts/Roboto/RobotoCondensed-LightItalic.ttf') format('truetype');
font-weight: 300;
font-style: italic;
}
