agent.css 中的奇怪（错误？）字体选择？

Question

我正在为一个新网站设计一个主题。我们有一些专业的图形帮助我们设计主题。对于首页，他们采用并调整了Agency theme。

如果你下载那个主题（它是免费的）并搜索agency.css文件并打开它，有一个CSS行来指示页面的默认字体：

body
{
    font-family: "Roboto Slab", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

我们可以看到font-family中的指定字体以"Roboto Slab"开头，然后是"Helvetica Neue"，"Helvetica" 、"Arial"，最后是浏览器会喜欢的默认 "sans-serif"。

只有“Roboto Slab”字体是“serif”字体，其他都是“sans-serif”字体。 .

作为设计师，你会说这是一个错误吗？因为如果您的计算机不包含该字体，或者该字体在上面的链接中不可用，它会从 "serif" 字体变为 "sans-serif" em> 字体...这对我来说似乎是错误的。

Answer 1

您应该考虑两个不同的方面：

1. 现代网络不再需要为相同的文本提供不同的字体系列。

这是一种遗留技术，可追溯到需要在机器上安装字体才能用于呈现网页的时候。由于我们现在能够以css 文件的形式提供字体并使用@font-face 声明加载它们（我假设您的网站使用），因此只有在渲染网站的机器无法加载提供的字体文件时才会发生回退（这这种情况极为罕见，而且当这种情况发生时，用不同的字体渲染的字体很可能不是页面最严重的渲染问题——所以最好的做法可能是重新加载页面）。

1. 如果第二个和第三个字体选项是由设计师提供的（前提是他们是专业人士），这些字体可能与您的其他主要字体匹配，即使它属于不同类型，它仍会补充其他字体好吧。

---

我想指出，我实际上有过设计相关的研究，但在过去大约 10 年里已经成为一名专业的编码员。
选择和匹配字体是一个复杂的过程，通常，正确的size、weight 或style 比字体是serif、sans-serif、monotype 或fantasy 更重要.没有匹配字体的秘诀，通常它需要退后一步，通过昏暗的眼睛看。同样重要的是还要测试多种类型和内容组合，以确保它们都平衡且看起来不错。

在设计中，遵循严格的规则可以让你获得高于平均水平的结果，但永远不会在顶部10%。大多数时候都是基于大胆的行动和灵感。不要用尺子测量设计师的作品。如果您确实需要，请根据用户行为进行衡量。如果流量/响应/承诺增加，那么您的设计就很好。

Answer 2

您从此类问题中得到的答案在某种程度上将基于观点，而不是事实、参考资料或特定专业知识。我的观点是所有重要的浏览器都支持网络字体。如果正确使用网络字体，它将正确显示给 99.9% 的网站访问者。列出的其他字体只是 0.1% 访问者的备用字体，由于某种原因无法加载自定义 Web 字体。最重要的是他们将能够阅读您的内容。如果您想控制备用字体，您应该选择所有平台上都存在的一组系统原生字体。您可以使用 courier，但这是一种等距字体（固定宽度），我怀疑它更具可读性或花哨。 sans serif 也比 e.g. 更现代。时代，因此更接近 Roboto Slab 的现代外观。