文本字体是 Android Chrome 上的默认字体

Question

按照我的 CSS 规定，我网站的文字是“Cooper Black”。在 Android Chrome 浏览器中查看时，我看到文本是默认文本，而不是 Cooper Black。

我假设我的字体没有预加载，我能做什么？

.sitetext-white {
    font-family: 'Cooper Black';
    color: white;
}

Answer 1

Cooper Black 不是我们所说的Web Safe Font，因为它在大部分操作系统上都找不到。即使这样，Arial 之类的字体也只能在 Windows 机器上找到，所以它们需要有一个后备。

font-family 属性应该包含几个字体名称作为“备用”系统，以确保浏览器/操作系统之间的最大兼容性。如果浏览器不支持第一种字体，它会尝试下一种字体。

从你想要的字体开始，以一个通用系列结束，让浏览器在通用系列中选择一个类似的字体，如果没有其他字体可用：

如果您想使用非标准字体，我们有我们所说的Font Face。

使用@font-face 规则，网页设计师不再需要使用“网络安全”字体之一。

在新的@font-face 规则中，您必须首先为字体定义一个名称（例如 myFirstFont），然后指向字体文件。

如果您想找到一种与@font-face 一起使用的好字体，我建议您前往Font Squirrel 并使用Webfont Generator。

如何最好地设置您的 @font-face 语法可以在 this article 上找到，作者来自 Google 的 Paul Irish：

@font-face {
    font-family: 'Graublau Web';
    src: url('GraublauWeb.eot?') format('eot'), url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}

这是 Fontspring @font-face 语法。我会回到为什么这是最好的解决方案，但让我们首先回顾一下其他技术的弱点。当然，这里的核心问题是IE需要.eot字体，而其他浏览器必须采用.ttf或.otf。

如果您的应用程序在网络上，您还可以使用Google Fonts，它有一个非常好的库，这意味着您需要做的就是在您的网站中链接到它。