css - 是否需要对每个谷歌字体名称使用通用字体系列名称

标签 css fonts

我们知道,当在您的网站上注册任何谷歌字​​体 url,然后可以在 font-family css 属性中使用它时,在每个谷歌字体名称之后,我们会看到通用字体系列名称,如 sans-serif、serif、cursive 和 monospace 如下面的示例

font-family: 'Tulpen One', cursive;
font-family: 'Ubuntu', sans-serif;
font-family: 'Trykker', serif;
font-family: 'Ubuntu Mono', monospace;

谷歌字体是否可以在不使用通用字体系列名称的情况下使用 font-family 属性?并且只使用谷歌字体名称?就像下面的例子

font-family: 'Tulpen One';
font-family: 'Ubuntu';
font-family: 'Trykker';
font-family: 'Ubuntu Mono';

最佳答案

这个问题突出了对 CSS 的误解 - 你从谷歌获得的 font-face 规则告诉 CSS 引擎将哪个字节码用作特定字体系列的字体资源(以及在什么样式/重量).这就是它所做的,并且可以做的。无论您使用来自 Typekit、Google 或 github.io 的外部字体,还是您自己的本地托管字体。

与此相反,您的页面 CSS 负责说明浏览器应该为特定内容使用哪些字体系列:如果您列出一个或多个字体系列,那么浏览器将尝试每一个那些直到它找到一个支持它需要设置样式的文本,并且它检查每个字母。如果一个字体系列不支持单个字母,它将检查下一个字体。如果它用完了要检查的字体(例如,您只列出了一个 font-family 值),那么浏览器将猜测,然后选择您不想要的任何感觉它要做。

因此您(并且只有您)可以确保您的页面 CSS 具有正确的字体堆栈。特别是当您依赖外部字体资源时,完全现实的是,有时这些资源将不可用并且您对该字体的字体系列指令将失败:然后呢?所以至少总是添加通用字体系列,但也在两者之间添加一种或多种“网络安全”字体。它会看起来完美吗?不,当然不是,但它看起来比浏览器完全猜测要好。

保留您的通用类别关键字,并添加更多:

font-family: Ubuntu, Tahoma, Geneva, sans-serif;

使用完整的字体堆栈,因为您无法控制互联网。当它没有按照您的意愿行事时做好计划。

关于css - 是否需要对每个谷歌字体名称使用通用字体系列名称,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39674949/

相关文章:

css - 填充左右浮动元素之间的水平空间

javascript - 在重新加载和加载时滚动到相同位置

html - 我可以在没有 bootstrap css 的情况下使用 fontawesome 图标吗?

c# - 如何从 Fontfamily 中获取准确的字体?

android - 自定义字体的垂直对齐偏移

css - 有没有办法让 div 的宽度可变,对于小型设备宽度为 96%,对于大屏幕宽度为 62%?

javascript - 当表数据指针事件停用时,表行 (<tr>) 无法接收指针事件

css - 如何简化这个 SASS 语句?

vue.js - 无法解码下载的字体。 OTS 解析错误。浏览器

c# - 屏幕较小时增大字体大小