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个回答
1

这很容易

你下载的每个文件夹都有不同种类的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';来简单地使用该字体。
1

实际上很简单。前往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*/

希望这有所帮助。

0
你读了那个zip文件里的How_To_Use_Webfonts.html吗？
读完之后，每个字体子文件夹中似乎都有一个已经创建好的.css文件，你可以通过包含以下内容来使用它：
<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接