如何在网站上使用 Google 的 Roboto 字体? [英] How can I use Google's Roboto font on a website?

问题描述

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

在右上角的搜索框中搜索Roboto

选择要使用的字体变体

点击顶部的选择此字体"并选择您需要的粗细和字符集.

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

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

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

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

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

Now I have three questions:

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

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:

/media/fonts/roboto

解决方案

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

• Go to Google's Web Fonts page
• search for Roboto in 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.

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

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

这篇关于如何在网站上使用 Google 的 Roboto 字体?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！