如果我使用的是googleFonts中不存在的自定义字体,我应该为每个字体系列指定一个不同的名称吗?

时间:2017-10-07 10:52:49

标签: html css css3 fonts font-face

我使用的是一种名为DejaVuSans的字体,它有不同的样式(普通,粗体,斜体......),我使用的是一些使用multiply font-face的样式

@font-face {
    font-family: 'DejaVu Sans';
    src: url(../fonts/DejaVuSans.eot);
        src: url(../fonts/DejaVuSans.ttf)  format("truetype"), 
             url(../fonts/DejaVuSans.woff) format("woff");
    font-weight:normal;
    font-style: normal;
}
@font-face {
    font-family: 'DejaVu Sans';
    src: url(../fonts/DejaVuSans-Oblique.eot);
        src: url(../fonts/DejaVuSans-Oblique.ttf)  format("truetype"), 
             url(../fonts/DejaVuSans-Oblique.woff) format("woff");
    font-weight:normal;
    font-style: italic;
}
@font-face {
    font-family: 'DejaVu Sans';
    src: url(../fonts/DejaVuSans-Bold.eot);
        src: url(../fonts/DejaVuSans-Bold.ttf)  format("truetype"), 
             url(../fonts/DejaVuSans-Bold.woff) format("woff");
    font-weight:bold;
    font-style: normal;
}
@font-face {
    font-family: 'DejaVu Sans';
    src: url(../fonts/DejaVuSans-BoldOblique.eot);
        src: url(../fonts/DejaVuSans-BoldOblique.ttf)  format("truetype"), 
             url(../fonts/DejaVuSans-BoldOblique.woff) format("woff");
    font-weight:bold;
    font-style: italic;
}

现在所有这些都有相同的字体系列,我如何指定我想使用哪一个? 因为在这种情况下我将使用相同的font-family

<div style="font-family:'DejaVu Sans'"></div>

现在这个div的字体是哪种样式?

我应该为每个字体使用不同的名称,如

@font-face{
   font-family:'DejaVu Sans normal'
}
@font-face{
   font-family:'DejaVu Sans bold'
}
etc ..

1 个答案:

答案 0 :(得分:1)

字体取决于您要放置的字体样式或重量。

<div style="font-family:'DejaVu Sans'; font-weight: bold;"></div>

<div style="font-family:'DejaVu Sans'; font-style: italic;"></div>