即使源是正确的,@ font-face也不起作用

时间:2015-01-19 22:08:35

标签: css import font-face

我只是想导入并使用我在http://www.fontsquirrel.com

上生成的字体

这是我嵌入字体的css:

@font-face {
    font-family: 'robotothin';
    src: url('../fonts/webfont/roboto-thin-webfont.eot');
    src: url('../fonts/webfont/roboto-thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/webfont/roboto-thin-webfont.woff2') format('woff2'),
         url('../fonts/webfont/roboto-thin-webfont.woff') format('woff'),
         url('../fonts/webfont/roboto-thin-webfont.ttf') format('truetype'),
         url('../fonts/webfont/roboto-thin-webfont.svg#robotothin') format('svg');
    font-weight: normal;
    font-style: normal;

}

这就是我尝试使用它的方式。

html, body{
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: 'robotothin';
    font-weight: normal;
    font-style: normal;
}

这就是我存储字体的地方

enter image description here

只是不知道为什么它不起作用。请帮帮我!

1 个答案:

答案 0 :(得分:1)

使用该字体的Google字体版http://www.google.com/fonts#UsePlace:use/Collection:Roboto 将此添加到您的HTML

<link href='http://fonts.googleapis.com/css?family=Roboto:500,900italic,900,400italic,100,700italic,300,700,500italic,100italic,300italic,400&subset=latin,cyrillic-ext,latin-ext,cyrillic,greek-ext,greek,vietnamese' rel='stylesheet' type='text/css'>

这就是你想要使用字体的地方

font-family: 'Roboto', sans-serif;

这是行动中的fiddle