WebFont @font-face 定义衬线/无衬线/等宽答案

【问题标题】：WebFont @font-face define serif/sans-serif/monospaceWebFont @font-face 定义衬线/无衬线/等宽
【发布时间】：2015-12-25 11:13:57
【问题描述】：

我在我的网站中使用了许多网络字体，现在我想添加具有 serif/sans-serif/monospace 字体类型的新字体系列。我的 CSS 的一部分：

@font-face {
    font-family: 'DejaVu', sans-serif;
    font-weight: 400;
    font-style: normal;
    src: url(dejavu/DejaVuSans.ttf)
}
@font-face {
    font-family: 'DejaVu', monospace;
    font-weight: 400;
    font-style: normal;
    src: url(dejavu/DejaVuSansMono.ttf);
}
@font-face {
    font-family: 'DejaVu', serif;
    font-weight: 400;
    font-style: normal;
    src: url(dejavu/DejaVuSerif.ttf);
}

但它不起作用（在 css 控制台中，我看到如下错误：font-family 的值错误）。有没有办法让它只使用一个字体名称。

我知道我可以将字体系列名称更改为：“DejaVu Serif”，但我不想这样做。

【问题讨论】：

标签： html css fonts webfonts

【解决方案1】：

答案是否定的，唯一的方法是更改 font-family 名称以包含字体定义。

您可以设置font-style 或font-weight 并使用它们来选择您的font-face，但您不能堆叠font-face 系列。

【讨论】：