如何将Google网络字体用作SUBSTITUTE字体？

Question

我正在尝试使用Google网络字体作为替代字体。但它不是替代字体，而是充当主要字体。

在我，我把它链接到字体：

<link href='http://fonts.googleapis.com/css?family=Balthazar' rel='stylesheet' type='text/css'>

在我的CSS中，我有各种各样的Copperplate字体，我知道它可以在我的电脑上运行，我已经安装了一些。这部分是我的CSS的开头：

.class{
    font-size: 24pt;
    font-family: Copperplate Gothic Bold, Copperplate Gothic Light, Copperplate, Balthazar;
}

但即使Balthazar是最后一种字体，它也会成为第一种字体。我能解决这个问题吗？

Answer 1

字体系列降级在其所有三种导入方案（@import，<link>或JavaScript）中都可以正常使用Google字体。

请参阅此示例：http://jsfiddle.net/awRQm/

---

最可能的原因是 真的回到了Balthazar。

对于多字词字体名称，最好将它们包装在单引号中，如下所示：

.class{ font-size: 24pt; font-family: 'Copperplate Gothic Bold', 'Copperplate Gothic Light', Copperplate, Balthazar; }

根据CSS 2.1 spec：

  

“如果标识符序列作为字体系列名称给出，则   计算值是通过连接所有的转换为字符串的名称   序列中的标识符由单个空格“

组成

Answer 2

名称中包含空格的字体必须放在引号中才能被css正确读取，这也适用于谷歌网络字体，只是为了安全起见。

示例：font:family: "Copperplate Gothic Bold", "Copperplate Gothic Light", Copperplate, "Balthazar";