我如何在网站上使用谷歌的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

当前回答

你真的不需要做这些。

去谷歌的网页字体页面在右上方的搜索框中搜索Roboto 选择要使用的字体的变体点击顶部的“选择此字体”，选择你需要的权重和字符集。

该页面将为您提供一个<link>元素，以包含在您的页面中，以及一个示例字体家族规则列表，以用于您的CSS。

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

2013-08-12 02:52:21

其他回答

在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

花了一个小时，解决了字体问题。

相关答案-以下是React.js网站:

Install the npm module: npm install --save typeface-roboto-mono import in .js file you want to use one of the below: import "typeface-roboto-mono"; // if import is supported require('typeface-roboto-mono') // if import is not supported For the element you can use one of the below: 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*/

希望这能有所帮助。

2020-05-02 05:20:40

你看过压缩文件里的How_To_Use_Webfonts.html了吗?

在阅读之后，似乎每个字体子文件夹都有一个已经创建的.css，你可以通过包括以下内容来使用:

<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />

2013-08-12 02:56:00

试试这个

<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

其实很简单。去谷歌的网站上的字体，并添加它的链接到每页的头部，你想包括字体。

2020-04-11 08:01:11

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

推荐文章

最新文章

标签