logo标签列表

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

htmlcssfonts
234

我想在我的网站上使用Google的Roboto字体，正在遵循这个教程：

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

我已经下载了文件，它的文件夹结构如下：

enter image description here

现在我有三个问题：

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

如果我想要一个目录结构类似于：

/media/fonts/roboto

那么我的URL应该长什么样？

14个回答
350

你其实不需要做这些。

  • 前往 Google 的 Web Fonts 页面
  • 在右上角的搜索框中搜索 Roboto
  • 选择您想要使用的字体变体
  • 点击顶部的“选择此字体”，选择您需要的字重和字符集。

该页面将为您提供一个<link>元素，以包含在您的页面中，并提供一组示例font-family规则，以在您的CSS中使用。

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

1
谢谢，那太完美了。你知道谷歌在Google Play商店的播放列表字体中使用哪些设置吗？我想要完全像那样的风格。此外，我在链接中没有找到链接或代码片段。我看到那里有字体，但没有代码。 - user26
3
很酷的事情，它们也提供了对LESS文件的@import！然而，在没有互联网连接或遇到谷歌连接问题（例如：中国）时进行测试=没有字体...我还注意到没有Roboto Black（Roboto Bk） font-family：实际上他们只使用3个字体系列（Roboto、Roboto Condensed和Roboto Slab），所有其他Roboto变体都是通过font-style和font-weight CSS更改实现的。因此，在放置谷歌<link>后，最好检查一下字体是否真的存在。如果没有，请使用自己的字体（顺便说一句，从一个字体系列加载所有文件通常不超过0.5MB）。 - Armfoot
12
@user26 <link href='http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900' rel='stylesheet' type='text/css'> 这会加载一个字体系列 Roboto 的所有样式。但是，如果你需要一个不在 Google Fonts 中的字体系列（例如 Roboto Black），你需要将文件放在你的文件夹里，并将你在问题中展示的示例代码复制到你的 main.css（像这样 @font-face{font-family: 'Roboto Black';src:url('/media/fonts/roboto/roboto_black_macroman/blablabla.eot; ...etc.），或者像我在我的答案中建议的那样。 - Armfoot
36
“使用Google字体的方式保证了可用性”的说法是错误的。没有什么可以“保证可用性”，更不用说Google字体了。我是十亿人中的一个，使用Google的CDN意味着许多网站无法正常加载，甚至根本无法加载。我不会告诉任何人该怎么做，但请不要认为Google的CDN是完美的解决方案。 - Nateowami
6
正如@Nateowami所提到的，你正在依赖于谷歌的服务器（可能在某些国家被封锁），这对隐私很不利，并且如果你将字体托管到自己的CDN上，性能实际上可能会更好。这需要更多工作，但那是你的工作，不是吗？ - Robin Métral
显示剩余5条评论
92

有两种方法可以在您的页面上使用授权的网络字体：

1. 类似Typekit、Fonts.com、Fontdeck等的字体托管服务。

这些服务为设计师提供了一个简单的界面来管理已购买的字体，并生成一个链接到动态CSS或JavaScript文件的链接，用于提供字体。Google甚至免费提供了这项服务（这里是您请求的Roboto字体的示例）。

像Google和Typekit使用的JS字体加载器（例如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. 自己动手的方法

这种方法需要为网页使用获取许可的字体，并（可选地）使用类似 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：Google 的标志性字体现已开源。您现在可以使用此处找到的说明手动生成 Roboto 字体。

请问如何从Roboto字体套件中选择特定的字体，如果您选择了其中几个？因为似乎同样的CSS属性适用于它们所有： font-family: 'Roboto'，sans-serif; - Kosem
31

我知道这是一个旧帖子。

这也可以使用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;
}
8
你的解决方案是性能反模式。在你的标记中使用链接标签会导致比@import更早地下载Google的CSS文件；浏览器通常会更早地发现资源引用，特别是由于预加载器（在解析HTML时与先解析HTML，然后发现你的CSS文件，然后下载它，然后解析并发现@import，然后下载导入的样式表相比）。 - Radko Dinev
6
不一定。使用Webpack和插件，所有这些内容都将被嵌入到你的分发构建中。 - Spock
添加 display=swap。 - Barney Szabolcs
13

CSS样式：

@font-face {
  font-family: 'Roboto';
  src: url('../font/Roboto-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* etc, etc. */

Sass：

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

对于网站，您可以使用以下方式中的“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;
}
8
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）。
基本上（回答您的问题）：

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

您可以将其留在那里，但务必使用 src: url('../fonts/roboto/。

我需要从所有子文件夹中提取所有 eot、svg 等并放入 fonts 文件夹中吗？

如果您想直接引用这些文件（而不是在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文件中使用@import“fonts”;（less是一种CSS预处理器，它让这样的事情变得更容易）

4
    /* -- 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;
}
1
这并没有回答任何原始问题。 - Pointless One
3

这是我为了静态部署获取所需的woff2文件而不必使用CDN所做的事情

暂时将css的cdn添加到index.html中，让页面加载以加载roboto字体。从Google开发工具中查看源代码，展开fonts.googleapis.com节点并查看css?family=Roboto:300,400,500&display=swap文件的内容，然后将内容复制到资产目录中的css文件中。

在css文件中，删除所有希腊文、西里尔文和越南文等内容。

查看此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 文件。

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;

}
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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接