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

Question

提问by user26

I want to use Google's Roboto font on my website and I am following this tutorial:

我想在我的网站上使用 Google 的 Roboto 字体，我正在学习本教程：

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

I have downloaded the file which has a folder structure like this:

我已经下载了具有如下文件夹结构的文件：

enter image description here

在此处输入图片说明

Now I have three questions:

现在我有三个问题：

I have css in my media/css/main.cssurl. So where do I need to put that folder?
Do I need to extract all eot,svg etc from all sub folder and put in fontsfolder?
Do I need to create css file fonts.css and include in my base template file?

我的media/css/main.css网址中有 css 。那么我需要把那个文件夹放在哪里呢？
我是否需要从所有子文件夹中提取所有 eot、svg 等并放入fonts文件夹中？
我是否需要创建 css 文件 fonts.css 并将其包含在我的基本模板文件中？

The example he uses this

他用这个的例子

@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;
}

What should my url look like, if I want to have the dir structure like:

如果我想要目录结构，我的 url 应该是什么样子：

/media/fonts/roboto

Answer 1

回答by

You don't really need to do any of this.

你真的不需要做任何这些。

Go to Google's Web Fonts page
search for Robotoin the search box at the top right
Select the variants of the font you want to use
click 'Select This Font' at the top and choose the weights and character sets you need.

转到 Google 的Web 字体页面
搜索Roboto在搜索框右上方
选择要使用的字体变体
单击顶部的“选择此字体”并选择您需要的权重和字符集。

The page will give you a <link>element to include in your pages, and a list of sample font-familyrules to use in your CSS.

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

Using Google's fonts this way guarantees availability, and reduces bandwidth to your own server.

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

Answer 2

回答by Ashesh Kumar Singh

There are TWO approachesthat you can take to use licensed web-fonts on your pages:

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

Font Hosting Services like Typekit, Fonts.com, Fontdeck, etc., provide an easy interface for designers to manage fonts purchased, and generate a link to a dynamic CSS or JavaScript file that serves up the font.Google even provides this service for free (hereis an example for the Roboto font you requested). Typekit is the only service to provide additional font hinting to ensure fonts occupy the same pixels across browsers.
JS font loaders like the one used by Google and Typekit (i.e. WebFont loader) provide CSS classes and callbacks to help manage the FOUTthat may occur, or response timeouts when downloading the font.
```
<head>
  
  <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>

  
  <style>
    body {
      font-family: 'Roboto', sans-serif;
      font-size: 48px;
    }
  </style>
</head>
```

The DIY approach involves getting a font licensed for web use, and (optionally) using a tool like FontSquirrel's generator (or some software) to optimize its file size.Then, a cross-browser implementation of the standard @font-faceCSS property is used to enable the font(s).

This approach can provides better load performance since you have a more granular control over the characters to include and hence the file-size.

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

Typekit、Fonts.com、Fontdeck 等字体托管服务为设计人员提供了一个简单的界面来管理所购买的字体，并生成指向提供该字体的动态 CSS 或 JavaScript 文件的链接。Google 甚至免费提供此服务（这里是您请求的 Roboto 字体示例）。Typekit 是唯一提供额外字体提示以确保字体在浏览器中占据相同像素的服务。
像 Google 和 Typekit 使用的那种 JS 字体加载器（即 WebFont 加载器）提供 CSS 类和回调来帮助管理可能发生的FOUT，或下载字体时的响应超时。
```
<head>
  
  <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>

  
  <style>
    body {
      font-family: 'Roboto', sans-serif;
      font-size: 48px;
    }
  </style>
</head>
```

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

Long story short:

长话短说：

Using font hosting services along with @font-face declaration gives best output with respect to overall performance, compatibility and availability.

使用字体托管服务和 @font-face 声明可以在整体性能、兼容性和可用性方面提供最佳输出。

Source: https://www.artzstudio.com/2012/02/web-font-performance-weighing-fontface-options-and-alternatives/

资料来源：https: //www.artzstudio.com/2012/02/web-font-performance-weighing-fontface-options-and-alternatives/

UPDATE

更新

Roboto: Google's signature font is now open source

Roboto：谷歌的签名字体现已开源

You can now manually generate the Roboto fonts using instructions that can be found here.

您现在可以使用可在此处找到的说明手动生成 Roboto 字体。

Answer 3

回答by rocksteady

Old post, I know.

老帖子，我知道。

This is also possible using CSS@import url:

这也可以使用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;
}

Answer 4

回答by Armfoot

The srcrefers directly to the font files, therefore if you place all of them on /media/fonts/robotoyou should refer to them in your main.css like this: src: url('../fonts/roboto/Roboto-ThinItalic-webfont.eot');

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

The ..goes one folder up, which means you're referring to the mediafolder if the main.css is in the /media/cssfolder.

在..进入一个文件夹了，这意味着你指的是media文件夹，如果该main.css的是在/media/css文件夹中。

You have to use ../fonts/roboto/in all url references in the CSS (and be sure that the files are in this folder and not in subdirectories, such as roboto_black_macroman).

您必须../fonts/roboto/在 CSS 中的所有 url 引用中使用（并确保文件在此文件夹中，而不是在子目录中，例如roboto_black_macroman）。

Basically (answering to your questions):

基本上（回答您的问题）：

I have css in my media/css/main.css url. So where do i need to put that folder

我的 media/css/main.css url 中有 css。那么我需要把那个文件夹放在哪里

You can leave it there, but be sure to use src: url('../fonts/roboto/

你可以把它留在那里，但一定要使用 src: url('../fonts/roboto/

Do i need to extract all eot,svg etc from all sub folder and put in fonts folder

我是否需要从所有子文件夹中提取所有 eot、svg 等并放入 fonts 文件夹中

If you want to refer to those files directly (without placing the subdirectories in your CSS code), then yes.

如果您想直接引用这些文件（不将子目录放在 CSS 代码中），那么可以。

Do i need to create css file fonts.css and include in my base template file

我是否需要创建 css 文件 fonts.css 并包含在我的基本模板文件中

Not necessarily, you can just include that code in your main.css. But it's a good practice to separate fonts from your customized CSS.

不一定，您可以在 main.css 中包含该代码。但将字体与自定义 CSS 分开是一个很好的做法。

Here's an example of a fonts LESS/CSS file I use:

这是我使用的字体 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';}

(In this example I'm only using the ttf) Then I use @import "fonts";in my main.less file (less is a CSS preprocessor, it makes things like this a little bit easier)

（在这个例子中我只使用了 ttf）然后我@import "fonts";在我的 main.less 文件中使用（less 是一个 CSS 预处理器，它使这样的事情更容易一些）

Answer 5

回答by Helzgate

This is what I did to get the woff2 files I wanted for static deployment without having to use a CDN

这就是我为获得静态部署所需的 woff2 文件而无需使用 CDN 所做的工作

TEMPORARILY add the cdn for the css to load the roboto fonts into index.html and let the page load. from google dev tools look at sources and expand the fonts.googleapis.com node and view the content of the css?family=Roboto:300,400,500&display=swap file and copy the content. Put this content in a css file in your assets directory.

暂时为css添加cdn以将roboto字体加载到index.html并让页面加载。从谷歌开发工具查看源代码并展开 fonts.googleapis.com 节点并查看 css?family=Roboto:300,400,500&display=swap 文件的内容并复制内容。将此内容放在您的资产目录中的 css 文件中。

In the css file, remove all the greek, cryllic and vietnamese stuff.

在 css 文件中，删除所有希腊语、水晶语和越南语的内容。

Look at the lines in this css file that are similar to:

查看此 css 文件中类似于以下内容的行：

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

copy the link address and paste it in your browser, it will download the font. Put this font into your assets folder and rename it here, as well as in the css file. Do this to the other links, I had 6 unique woff2 files.

复制链接地址并将其粘贴到您的浏览器中，它将下载字体。将此字体放入您的资产文件夹并在此处以及 css 文件中重命名。对其他链接执行此操作，我有 6 个独特的 woff2 文件。

I followed the same steps for material icons.

我对材质图标执行了相同的步骤。

Now go back and comment the line where you call the cdn and instead use use the new css file you created.

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

Answer 6

回答by Lead Developer

Try this

尝试这个

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

Answer 7

回答by Mr. Nobody

For Website you can use 'Roboto' font as below:

对于网站，您可以使用“Roboto”字体，如下所示：

If you have created separate css file then put below line at the top of css file as:

如果您创建了单独的 css 文件，则在 css 文件顶部放置以下行：

@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i');

Or if you don't want to create separate file then add above line in between <style>...</style>:

或者，如果您不想创建单独的文件，则在中间添加上一行<style>...</style>：

<style>
  @import url('https://fonts.googleapis.com/css? 
  family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i');
</style>

then:

然后：

html, body {
    font-family: 'Roboto', sans-serif;
}

Answer 8

回答by Mohammed Javed

Use /fonts/or /font/before font type name in your CSS stylesheet. I face this error but after that its working fine.

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

}

Answer 9

回答by Barry Colebank Jr

Did you read the How_To_Use_Webfonts.html that's in that zip file?

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

After reading that, it seems that each font subfolder has an already created .css in there that you can use by including this:

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

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

Answer 10

回答by Omar Moustafa

it's easy

这很简单

every folder of those you downloaded has a different kind of roboto font, means they are different fonts

您下载的每个文件夹都有不同类型的机器人字体，这意味着它们是不同的字体

example: "roboto_regular_macroman"

示例：“roboto_regular_macroman”

to use any of them:

使用其中任何一个：

1- extract the folder of the font you want to use

1-提取您要使用的字体的文件夹

2- upload it near the css file

2-将其上传到 css 文件附近

3- now include it in the css file

3- 现在将它包含在 css 文件中

example for including the font which called "roboto_regular_macroman":

包含名为“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;
}

watch for the path of the files, here i uploaded the folder called "roboto_regular_macroman" in the same folder where the css is

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

then you can now simply use the font by typing font-family: 'Roboto';

然后您现在可以通过键入简单地使用字体 font-family: 'Roboto';

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

提问by user26

回答by

回答by Ashesh Kumar Singh

Long story short:

长话短说：

Roboto: Google's signature font is now open source

Roboto：谷歌的签名字体现已开源

回答by rocksteady

回答by Armfoot

回答by Helzgate

回答by Lead Developer

回答by Mr. Nobody

回答by Mohammed Javed

回答by Barry Colebank Jr

回答by Omar Moustafa

相关推荐

最近更新

标签

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

提问by user26

回答by

回答by Ashesh Kumar Singh

Long story short:

长话短说：

Roboto: Google's signature font is now open source

Roboto：谷歌的签名字体现已开源

回答by rocksteady

回答by Armfoot

回答by Helzgate

回答by Lead Developer

回答by Mr. Nobody

回答by Mohammed Javed

回答by Barry Colebank Jr

回答by Omar Moustafa

相关推荐

Html CSS：在相对父级内居中绝对定位文本

Html 我想从我的博客链接到我的 Facebook 页面

HTML 布局：向现有站点添加侧边栏

Html 自动拨打电话号码

相关推荐

最近更新

标签