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

163

我想在我的网站上使用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的结构，我的网址应该是什么样的：

/media/fonts/roboto

html  css  fonts 
— 用户26
source

Answers:

257

您实际上不需要执行任何操作。

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

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

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

— 苏尼尔·加格（Sunil Garg）
source
谢谢，那太完美了。您是否知道Google在Google Play商店中使用哪种设置来播放列表。我想拥有完全一样的风格。我也没有在链接中找到链接或代码片段。我确实在其中看到了字体，但没有找到代码
— 2013年
3
很酷的事情，他们也为LESS文件提供了一个@import！但是，测试没有互联网连接或Google连接问题（例如：中国）=没有字体...我还注意到没有Roboto Black（Roboto Bk）font-family：它们实际上仅使用3个字体家族（Roboto，Roboto Condensed和的Roboto板）所有其他的Roboto变体通过由font-style和font-weightCSS的变化。因此，理想情况下，在放置Google之后<link>检查字体是否确实存在。如果不是，请使用您自己的（加载一个字体家族的所有文件通常不超过0.5MB）。
— Armfoot
7
@ 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-face{font-family: 'Roboto Black';src:url('/media/fonts/roboto/roboto_black_macroman/blablabla.eot; ...etc.就像我建议的那样）我的答案）。
— Armfoot
14
-1表示Using Google's fonts this way guaranties availability。没有“保证可用性”，更不用说Google字体了。我恰好是数十亿人口中的一员，使用Google的CDN意味着数十亿个网站无法正确加载或根本无法加载。我不是在告诉任何人该怎么做，但不要认为Google的CDN是一个完美的解决方案。
— Nateowami
1
-1。正如@Nateowami提到的那样，您依赖于Google的服务器（在某些国家/地区可能会被屏蔽），这对隐私不利，如果您将字体托管在CDN上，则性能实际上会更好。这是更多的工作，但这是您的工作，不是吗？
— 罗宾·麦特拉（RobinMétral）
70

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

  1. 字体托管服务（如Typekit，Fonts.com，Fontdeck等）为设计人员提供了一个简单的界面，供设计人员管理购买的字体，并生成指向提供该字体的动态CSS或JavaScript文件的链接。Google甚至免费提供此服务（这是您请求的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>

  2. DIY方法涉及获得用于网络使用的字体许可，以及（可选）使用诸如FontSquirrel的生成器（或某些软件）之类的工具来优化其文件大小。然后，使用标准@font-faceCSS属性的跨浏览器实现来启用字体。

    这种方法可以提供更好的加载性能，因为您可以更精确地控制要包括的字符，从而可以控制文件大小。

    /* 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字体。

— 阿什什·库玛·辛格（Ashesh Kumar Singh）
source
17

我知道是旧帖子。

使用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;
}
— 稳如泰山
source
8
您的解决方案是一种性能反模式。与@import相比，在标记中使用link标签可以更快地下载Google CSS文件。浏览器通常会更早地发现资源引用，尤其是由于预加载器（解析HTML时先解析HTML，然后解析HTML，然后找到CSS文件，然后下载它，然后解析并发现@import，然后下载导入的样式表）。
— Radko Dinev '16
3
不必要。使用Webpack和插件，所有这些都将嵌入到您的发行版本中。
— Spock
5

在src直接引用的字体文件，因此，如果你把所有的人对/media/fonts/roboto你应该是指他们在您的main.css这样的： src: url('../fonts/roboto/Roboto-ThinItalic-webfont.eot');

上..移一个文件夹，这意味着media如果main.css位于文件夹中，则表示您正在引用该文件/media/css夹。

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

— 臂足
source
2

这是我无需使用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文件。

— 赫尔兹盖特
source
1

试试这个

<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>
— 首席开发人员
source
1

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

}
— 穆罕默德·贾维德（Mohammed Javed）
source
1

对于网站，您可以使用“ 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;
}
— 没人先生
source
0

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

读完这些内容后，似乎每个字体子文件夹中都有一个已创建的.css，您可以通过添加以下内容来使用：

<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />
— 小巴里·科尔班克
source
0

这很容易

您下载的文件夹中的每个文件夹都有不同类型的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;
}

注意文件的路径，在这里我在css所在的同一文件夹中上传了名为“ roboto_regular_macroman”的文件夹

那么您现在只需输入以下内容即可使用字体 font-family: 'Roboto';

— 奥马尔·穆斯塔法（Omar Moustafa）
source
0

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

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

希望有帮助。

— 马诺哈尔·雷迪·波迪
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.