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

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

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

我下载了一个文件夹结构如下所示的文件:

现在我有三个问题:

我有css在我的media/css/main.css url。我需要把文件夹放在哪里呢? 我需要提取所有的eot,svg等从所有子文件夹，并放在字体文件夹? 我需要创建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;
}

我的url应该是什么样的，如果我想有dir结构像:

/media/fonts/roboto

当前回答

老帖子了，我知道。

这也可以使用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-13 09:57:02

其他回答

在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-06 11:55:00

有两种方法，你可以采取在你的网页上使用授权网页字体:

1. 字体托管服务，如Typekit, Fonts.com, Fontdeck等。

这些服务为设计人员提供了一个简单的界面来管理所购买的字体，并生成指向提供字体的动态CSS或JavaScript文件的链接。谷歌甚至免费提供这项服务(这里是你要求的Roboto字体的一个例子)。

JS字体加载器，如谷歌和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>

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

TLDR;

在你的网站上嵌入自定义字体有两种主要方法。使用字体托管服务和@font-face声明可以在整体性能、兼容性和可用性方面提供最佳输出。

来源:https://www.artzstudio.com/2012/02/web-font-performance-weighing-fontface-options-and-alternatives/(链接无效)

更新

Roboto:谷歌的签名字体现在是开源的。您现在可以手动生成Roboto字体使用说明，可以在这里找到。

2014-06-17 22:32:07

试试这个

<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-16 06:21:43

对于网站，您可以使用“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-29 07:45:36

这就是我在不使用CDN的情况下获得静态部署所需的woff2文件所做的工作

临时添加cdn的css加载roboto字体到index.html，让页面加载。从谷歌开发工具查看来源和展开fonts.googleapis.com节点，并查看css的内容?family=Roboto:300,400,500&display=交换文件并复制内容。将这些内容放在assets目录下的css文件中。

在css文件中，删除所有的希腊文，克里利克文和越南文。

看看这个css文件中类似的行:

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

复制链接地址并粘贴到浏览器中，它将下载字体。把这个字体放到你的assets文件夹中，在这里重命名它，在css文件中也是如此。对其他链接也这样做，我有6个独特的woff2文件。

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

现在返回并注释您调用cdn的行，而不是使用您创建的新css文件。

2019-09-12 19:27:02

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

推荐文章

最新文章

标签