使用CSS：

Question

我想在我的网站上使用Google的Roboto字体，我正在关注本教程：

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

我已经下载了具有如下文件夹结构的文件：

enter image description here

现在我有三个问题：

我的media/css/main.css网址中有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结构那样：

/media/fonts/roboto

Answer 1

你真的不需要做任何这些。

转到Google的Web Fonts page
在右上角的搜索框中搜索Roboto
选择要使用的字体的变体
点击顶部的“选择此字体”，然后选择所需的权重和字符集。

该页面将为您提供要包含在您网页中的<link>元素，以及要在CSS中使用的示例font-family规则列表。

使用Google的字体可以保证可用性，并减少自己服务器的带宽。

Answer 2

您可以在网页上使用许可的网络字体

有两种方法：

Typekit，Fonts.com，Fontdeck等字体托管服务为设计人员提供了一个简单的界面来管理所购买的字体，并生成指向动态CSS或JavaScript文件的链接。字体。 Google甚至免费提供此服务（here是您请求的Roboto字体的示例）。 Typekit是唯一提供额外字体提示的服务，以确保字体在浏览器中占据相同的像素。
像Google和Typekit（即WebFont加载器）使用的JS字体加载器提供CSS类和回调来帮助管理可能发生的 FOUT ，或者在下载时回复超时字体。
```
<head>
  
  <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>

  
  <style>
    body {
      font-family: 'Roboto', sans-serif;
      font-size: 48px;
    }
  </style>
</head>
```

DIY方法涉及获取用于Web使用的字体，以及（可选）使用FontSquirrel的生成器（或某些软件）等工具来优化其文件大小。然后，交叉-browser实现标准@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;
}

长话短说：

使用字体托管服务和@ font-face声明可在整体性能，兼容性和可用性方面提供最佳输出。

来源：http://www.artzstudio.com/2012/02/web-font-performance-weighing-fontface-options-and-alternatives/

<强>更新

Roboto: Google’s signature font is now open source

现在，您可以使用可以找到here的说明手动生成Roboto字体。

Answer 3

老帖子，我知道。

使用 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;
}

Answer 4

src直接指向字体文件，因此如果您将所有这些文件放在/media/fonts/roboto上，则应在main.css中引用它们，如下所示： src: url('../fonts/roboto/Roboto-ThinItalic-webfont.eot');

..向上移动一个文件夹，这意味着如果main.css位于media文件夹中，则指的是/media/css文件夹。

您必须在CSS中的所有网址引用中使用../fonts/roboto/（并确保文件位于此文件夹中，而不是在子目录中，例如roboto_black_macroman）。

基本上（回答你的问题）：

我的media / css / main.css网址中有css。那么我需要把文件夹放在哪里

您可以将其保留，但请务必使用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）然后我在main.less文件（less is a CSS preprocessor, it makes things like this a little bit easier）

中使用@import "fonts";

Answer 5

在CSS样式表中使用 / 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;

}

Answer 6

For Website you can use 'Roboto' font as below:

**If you have created separate css file then put below line at the top of css file as:**
@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i');

**Or if you don't want to create separate file then add above line in between <style>...</style>:**
<style>
  @import url('https://fonts.googleapis.com/css? 
  family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i');
</style>

**then:**
html, body {
    font-family: 'Roboto', sans-serif;
}

Answer 7

实际上很简单。转到Google网站上的字体，然后将其链接添加到要包括该字体的每个页面的标题。

Answer 8

使用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 */

Answer 9

您是否阅读过该zip文件中的How_To_Use_Webfonts.html？

在阅读之后，似乎每个字体子文件夹都有一个已经创建的.css，你可以使用它包括：

<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />

Answer 10

很容易

您下载的每个文件夹都有不同类型的roboto字体，表示它们是不同的字体

示例：＆＃34; roboto_regular_macroman＆＃34;

使用其中任何一个：

1-解压缩您要使用的字体的文件夹

2-将其上传到css文件附近

3-现在将它包含在css文件中

包含调用＆＃34; roboto_regular_macroman＆＃34;的字体的示例：

@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;
}

注意文件的路径，这里我上传了名为＆＃34; roboto_regular_macroman＆＃34;的文件夹。在css所在的同一文件夹中

然后您现在可以通过键入font-family: 'Roboto';

来简单地使用该字体

Answer 11

试试这个

<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>

Answer 12

这就是我无需使用CDN即可获取用于静态部署的woff2文件的方法

临时为css添加cdn，以将roboto字体加载到index.html中，并加载页面。从google dev工具中查看源代码并展开fonts.googleapis.com节点，然后查看css？family = Roboto：300,400,500＆display = swap文件的内容并复制内容。将此内容放在资产目录中的css文件中。

在css文件中，删除所有希腊语，cryllic和越南语的内容。

查看此css文件中与以下内容相似的行：

    src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fBBc4.woff2) format('woff2');

复制链接地址并将其粘贴到您的浏览器中，它将下载字体。将此字体放入资产文件夹中，并在此处以及css文件中重命名。对其他链接执行此操作，我有6个唯一的woff2文件。

我对材质图标遵循相同的步骤。

现在返回并在调用cdn的行中添加注释，然后使用创建的新css文件。

Answer 13

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

相关答案-以下是React.js网站的信息：

安装npm模块：

npm install --save typeface-roboto-mono
导入要使用的.js文件
以下其中之一：

import "typeface-roboto-mono"; //如果支持导入
require('typeface-roboto-mono') //如果不支持导入
对于您可以使用的元素
以下之一：

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*/

希望有帮助。

Answer 14

    /* -- 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;
}

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

14 个答案:

长话短说：

Roboto: Google’s signature font is now open source

使用CSS：

和无礼：