如何在网站上使用 Google 的 Roboto 字体？
Posted
技术标签:
【中文标题】如何在网站上使用 Google 的 Roboto 字体？【英文标题】：How can I use Google's Roboto font on a website? 【发布时间】：2013-08-13 06:50:30 【问题描述】：我想在我的网站上使用 Google 的 Roboto 字体，我正在学习本教程：
http://www.maketecheasier.com/use-google-roboto-font-everywhere/2012/03/15
我已经下载了具有如下文件夹结构的文件：
现在我有三个问题：
-
我的
media/css/main.css url 中有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
【问题讨论】：
【参考方案1】： /* -- 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;
【讨论】：
这没有回答任何原始问题。【参考方案2】：用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 */
【讨论】：
【参考方案3】：您可以采用两种方法在您的网页上使用许可的网络字体：
-
Typekit、Fonts.com、Fontdeck 等字体托管服务为设计人员提供了一个简单的界面来管理所购买的字体，并生成一个指向提供该字体的动态 CSS 或 JavaScript 文件的链接。 Google 甚至免费提供这项服务（here 是您请求的 Roboto 字体的示例）。 Typekit 是唯一提供额外字体提示以确保字体在浏览器中占据相同像素的服务。
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>
-
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: Google’s signature font is now open source
您现在可以使用 here 中的说明手动生成 Roboto 字体。
【讨论】：
如果您选择了几种字体，您能否解释一下如何从 Roboto 套件中选择特定字体？因为它们似乎都使用了相同的 CSS 属性：font-family: 'Roboto', sans-serif;【参考方案4】：对于网站，您可以使用“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;
【讨论】：
【参考方案5】：花了一个小时，修复字体问题。
相关答案 - 以下是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-uifont-family: Roboto Mono, Menlo, Monaco, Courier, monospace; /* css */style="font-family:Roboto Mono, Menlo, Monaco, Courier, monospace;font-weight:300;" /*inline css*/
希望对您有所帮助。
【讨论】：
【参考方案6】：其实很简单。转到 Google 网站上的字体，并将其链接添加到要包含该字体的每个页面的头部。
【讨论】：
【参考方案7】：这就是我为获得静态部署所需的 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 文件。
【讨论】：
【参考方案8】：旧帖，我知道。
这也可以使用 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;
【讨论】：
您的解决方案是一种性能反模式。与@import 相比，在标记中使用链接标签可以更快地下载 Google 的 CSS 文件；浏览器通常会更早地发现资源引用，特别是由于预加载器（在解析 HTML 时，首先解析 HTML，然后发现您的 CSS 文件，然后下载它，然后解析并发现 @import，然后下载导入的样式表）。 不一定。使用 Webpack 和插件，这将全部嵌入到您的发行版本中。 添加 display=swap【参考方案9】：你真的不需要做任何这些。
转到谷歌的Web Fonts page 在右上角的搜索框中搜索Roboto
选择要使用的字体变体
点击顶部的“选择此字体”，然后选择您需要的粗细和字符集。
该页面将为您提供一个 <link> 元素以包含在您的页面中，以及一个示例 font-family 规则列表以在您的 CSS 中使用。
以这种方式使用 Google 的字体可确保可用性，并减少您自己服务器的带宽。
【讨论】：
谢谢你，太完美了。你知道谷歌在谷歌游戏商店中为他们的播放列表字体使用的设置吗？我想拥有完全一样的风格。我也没有在链接中找到链接或代码 sn-p。我确实看到那里的字体但没有代码 很酷的事情，他们也为 LESS 文件提供了一个 @import ！然而，测试没有互联网连接或谷歌连接问题（例如：中国）=没有字体......我还注意到没有 Roboto Black（Roboto Bk）font-family：他们实际上只使用 3 个字体系列（Roboto， Roboto Condensed 和 Roboto Slab）所有其他 Roboto 变体都是通过 font-style 和 font-weight CSS 更改制作的。所以理想情况下，在放置 Google <link> 后检查字体是否真的存在。如果没有，请使用您自己的（顺便说一句，从一个字体系列加载所有文件通常不超过 0.5MB）。
@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 字体中的字体系列（例如 Roboto Black），您需要文件夹中的文件并将您在问题中向我们展示的示例代码复制到您的 main.css（像这样@font-facefont-family: 'Roboto Black';src:url('/media/fonts/roboto/roboto_black_macroman/blablabla.eot; ...etc. 或像我在回答中建议的那样）。
-1 代表Using Google's fonts this way guaranties availability。没有什么“保证可用性”，更不用说谷歌字体了。我恰好是使用 Google 的 CDN 意味着大量网站无法正常加载或根本无法正常加载的十亿多人中的一员。我不会告诉任何人该做什么，但不要认为 Google 的 CDN 是一个完美的解决方案。
-1。正如@Nateowami 所提到的，您依赖于 Google 的服务器（可能在某些国家/地区被阻止），它是 bad for privacy，如果您自己将字体托管在 CDN 上，性能实际上可能会更好。这是更多的工作，但这是你的工作，不是吗？【参考方案10】：
在 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;
【讨论】：
【参考方案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>
【讨论】：
【参考方案12】：很简单
您下载的每个文件夹都有不同类型的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';即可使用该字体
【讨论】：
【参考方案13】：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 等并放入字体文件夹中
如果您想直接引用这些文件（而不在您的 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 is a CSS preprocessor, it makes things like this a little bit easier)
【讨论】：
【参考方案14】：您是否阅读了该 zip 文件中的 How_To_Use_Webfonts.html？
读完之后，似乎每个字体子文件夹都有一个已经创建的 .css，您可以通过包含以下内容来使用它：
<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />
【讨论】：
以上是关于如何在网站上使用 Google 的 Roboto 字体？的主要内容，如果未能解决你的问题，请参考以下文章
如何在 Nuxt/Vuetify 中从头部删除 Google 字体 Roboto？
Google Maps v3 - 防止 API 加载 Roboto 字体
使用 Google Fonts Roboto 的字体粗细，正常 (400) 和粗体 (700) 有效，浅色 (300) 无效