WebFont @font-face 定义 serif/sans-serif/monospace

Question

我在我的站点中使用了很多网络字体，现在我想添加具有 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 控制台中，我看到如下错误：字体系列的错误值）。有什么方法可以只使用一个字体名称来使其工作吗？

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

Answer 1

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

您可以设置 font-style 或 font-weight 并将它们用于 select 您的 font-face 但您不能堆叠 font-face 家庭。

WebFont @font-face 定义 serif/sans-serif/monospace

WebFont @font-face define serif/sans-serif/monospace

html

css

fonts

webfonts