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

问题描述

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

并搜索 Roboto 在右上方的搜索框中。选择要使用的字体的变体，点击底部的使用，然后选择所需的权重和字符集。

页面会给你一个<包含在你的页面中的code>< link> 元素，以及CSS中使用的样式font-family规则列表。

使用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 and search for Roboto in the search box at the top right. Select the variants of the font you want to use, click 'Use' at the bottom 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 guaranties availability, and reduces bandwidth to your own server.

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