Question

我希望我的@ font-face应用于范围，例如0到400个字体粗细值。我的@ font-face似乎只适用于其中指定的显式字体粗细。例如：

@font-face {
   font-family: 'Roboto';
   src: url('Roboto/Roboto-Bold.tff');
   font-weight: 200;
}

如果我用过：

span { font-weight: 201; font-family: 'Roboto';}

不适用。

Answer 1

显然只有9 valid font-weights。

Answer 2

尝试删除单引号：

@font-face {
   font-family: Roboto;
   src: url(Roboto/Roboto-Bold.tff);
   font-weight: 200;
}

span { font-weight: 200; font-family: Roboto;}

Answer 3

@font-face {
font-family: Roboto;
src: url(../fonts/Roboto-Bold.eot);
src: url(../fonts/Roboto-Bold.eot?#iefix) format('embedded-opentype'), url(../fonts/Roboto-Bold.woff) format('woff'), url(../fonts/Roboto-Bold.ttf) format('truetype');
font-weight: 700;
font-style: normal;

}

body {
    font-family: Roboto, Arial; font-weight: 100;}

Answer 4

在 MDN 上看到一篇文章

@font-face {
    font-family: 'Manrope';
    font-display: auto;
    font-style: normal;
    font-weight: 400 600;
    src: url('URL');
}

https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-weight

如何为一系列字体权重设置@ font-face

4 个答案: