207

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

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

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

在此处输入图像描述

现在我有三个问题：

  1. 我的media/css/main.css网址中有css。那么我需要把那个文件夹放在哪里呢？
  2. 我是否需要从所有子文件夹中提取所有 eot、svg 等并放入fonts文件夹中？
  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

4

14 回答 14

315

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

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

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

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

于 2013-08-12T02:52:21.807 回答
84

您可以采用两种方法在您的页面上使用许可的网络字体：

  1. 字体托管服务，如 Typekit、Fonts.com、Fontdeck 等，为设计人员提供了一个简单的界面来管理购买的字体，并生成一个指向提供字体的动态 CSS 或 JavaScript 文件的链接。Google 甚至免费提供这项服务（这里是您请求的 Roboto 字体的示例）。Typekit 是唯一提供额外字体提示以确保字体在浏览器中占据相同像素的服务。

JS 字体加载器（如 Google 和 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>
  1. 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;
    }

长话短说：

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

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

更新

Roboto：谷歌的签名字体现已开源

您现在可以使用此处的说明手动生成 Roboto 字体。

于 2014-06-17T22:32:07.370 回答
27

老帖子，我知道。

这也可以使用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;
}
于 2016-06-13T09:57:02.793 回答
8

src直接引用字体文件，因此如果你把它们都放在你/media/fonts/roboto应该在你的 main.css 中引用它们，如下所示： src: url('../fonts/roboto/Roboto-ThinItalic-webfont.eot');

向上一个文件夹，这意味着如果 main.css 在文件夹中..，则您指的是该文件夹。media/media/css

您必须../fonts/roboto/在 CSS 中的所有 url 引用中使用（并确保文件在此文件夹中，而不是在子目录中，例如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）然后我@import "fonts";在我的 main.less 文件中使用（less 是一个 CSS 预处理器，它让这样的事情变得更容易一些）

于 2013-08-12T02:50:05.027 回答
6

对于网站，您可以使用“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;
}
于 2018-06-29T07:45:36.247 回答
5

使用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 */
于 2020-07-25T04:39:23.270 回答
3

这就是我为获得静态部署所需的 woff2 文件而无需使用 CDN 所做的

临时添加 css 的 cdn 以将机器人字体加载到 index.html 并让页面加载。从谷歌开发工具查看源并展开 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 文件。

于 2019-09-12T19:27:02.393 回答
2

尝试这个

<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>
于 2014-04-16T06:21:43.787 回答
2

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

}
于 2016-04-06T11:55:00.250 回答
1

这很简单

您下载的每个文件夹都有不同类型的机器人字体，这意味着它们是不同的字体

示例：“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';

于 2013-08-12T03:02:16.963 回答
1

其实很简单。转到 Google 网站上的字体，并将其链接添加到要包含该字体的每个页面的头部。

于 2020-04-11T08:01:11.530 回答
0

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

读完之后，似乎每个字体子文件夹都有一个已经创建的 .css ，您可以通过包含以下内容来使用它：

<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />
于 2013-08-12T02:56:00.100 回答
0

花了一个小时，修复字体问题。

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

  1. 安装 npm 模块：

    npm install --save typeface-roboto-mono

  2. 在 .js 文件中导入您想要使用
    以下之一：

    import "typeface-roboto-mono"; // 如果支持导入
    require('typeface-roboto-mono') // 如果不支持导入

  3. 对于元素，您可以使用
    以下之一：

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

希望有帮助。

于 2020-05-02T05:20:40.130 回答
0 
    /* -- 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;
}
于 2021-08-10T11:26:41.597 回答