html - 如何使用 Google 网络字体作为替代字体?

标签 html css

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

在我的 中,我将它链接到字体:

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

在我的 CSS 中,我有 Copperplate 字体的变体,我知道它可以在我的 PC 上运行,并且我安装了其中的一些。这部分在我的 CSS 开头:

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

但即使 Balthazar 是最后一种字体,它也会成为第一种字体。我如何解决这个问题?

最佳答案

字体系列降级在 Google 字体的所有三种导入场景(@import<link>JavaScript)中似乎都能正常工作。

请看这个例子:http://jsfiddle.net/awRQm/


最可能的原因是它确实退回到 Balthazar。

对于多字字体名称,最好将它们用单引号括起来,如下所示:

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

根据CSS 2.1 spec :

"if a sequence of identifiers is given as a font family name, the computed value is the name converted to a string by joining all the identifiers in the sequence by single spaces"

关于html - 如何使用 Google 网络字体作为替代字体?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11975282/

相关文章:

php - 动态提取用 php 和 ajax 更新的 html 表

javascript - IE 对 HTMLDocument 和 HTMLElement 有什么看法

html - 使选定的导航页面链接改变颜色的简单方法?

javascript - jQuery .toggleClass() 在打开后不会关闭该类

html - 不扩展 html 正文或父元素的子元素

html - 有人可以帮我弄清楚我的 css 宽度困境吗?

css - css-run gallery 的最后一行重叠

html - (css) 图像上的对 Angular 线文本 (svg)

jquery - 有什么方法可以支持 bootstrap 工具提示中的 HTML 标签代码吗?

html - 交替行颜色 Angular Material 表