css - 有人可以解释为什么在 CSS 中使用网络安全字体似乎对我不起作用吗？

Question

我知道这是一个非常基本和愚蠢的问题，但我似乎遇到了一个真正好奇的问题。

当使用像 Didot 这样的网络安全字体时，并使用

header h1{
font-family: Didot, serif;
font-size: 36px;
}

我的浏览器只显示标准的衬线字体。

事实上，我似乎无法让它显示任何网络安全字体，它只会显示标准衬线或无衬线字体。我知道我的选择器是正确的，因为我可以在 serif 和 sans-serif 之间切换，但我知道它不显示其他网络安全字体，因为我尝试了 Arial 和 Helvetica(它们都绝对是网络安全的)并且当我从一个刷新到另一个显示的字体完全没有区别。

我是一个完全的初学者，我使用的是最简单的初学者环境，只是一个链接到我用浏览器打开的 css 文件的 html 页面(url 显示为 file:///C:/Users/Agent%201/Desktop/Web%20Projects/ResumeSite/index.html 如果完全相关的话)。我试过用 chrome 和 edge 打开它，两者的结果相同

我的CSS有问题吗？或者仅使用浏览器打开本地 html 文件时是否存在限制？

对不起，如果我是这个问题真的很愚蠢，但我真的找不到关于为什么我的字体不起作用的答案，我已经尝试了 !important 和我发现的其他一些奇怪的解决方案，其中涉及更改选择器到“header h1, header h1 *”，什么也没做。

感谢您能为我提供的任何帮助!

Answer 1

When using what are supposed to be web-safe fonts like Didot, and using...

• Didot 不是“网络安全”字体。

  • Didot is included with macOS ，这可能会导致一些网页设计者假设它在其他平台(如 Windows、Linux 和 Android)上也可用，或者这些平台具有自动映射等价物(如有多少浏览器会将 Helvetica 映射到 Arial)，但这并不能保证。
    • 此外，仅仅因为字体包含在操作系统中并不意味着它已获得许可供您用于商业用途或在网站中使用 - 您可能会因发布而被起诉将操作系统许可的字体发布到公共(public)网络上，而无需您自己的字体许可。

• “网络安全”字体是一种被大多数现代浏览器广泛安装和支持的字体，无需额​​外下载或安装字体。

  • 许多字体被广泛安装，例如 Microsoft's Core fonts for the web，它预装在所有 Windows 计算机上 - 许多其他操作系统(例如 macOS)要么具有相同的字体，要么具有非常相似的等效字体(例如 Helvetica 而不是 Arial)，它们会自动映射通过浏览器。

• 确定字体是否“网络安全”的唯一方法是自己跑腿并手动检查是否所有或大多数目标用户的设备都可以使用该字体。您可以在维基百科和其他网站上查看字体可用性:

  • 苹果操作系统:https://en.wikipedia.org/wiki/List_of_typefaces_included_with_macOS
  • Windows: https://en.wikipedia.org/wiki/List_of_typefaces_included_with_Microsoft_Windows
  • iOS: http://iosfonts.com/
  • Android:Consult Android's fonts.xml for the minimum set of stock fonts 和默认后备映射(例如，“Helvetica”变为“sans-serif”)。
    • 您可能会注意到 Android 的字体列表非常……短。那是因为基本的 Android 操作系统不是大多数人手机上的操作系统:谷歌在 Android 之上的层，OEM(如三星等)将在上面添加他们自己的字体，但我不知道从哪里得到它目前的列表，抱歉。​​

“网络安全字体堆栈”意味着 font-family 属性值中列出的至少一个字体可以被安全地假定为可用，并不是说所有都是-也不是说第一首选字体可用。

并且任何 font-family 列表都可以通过在末尾添加 CSS 回退 generic-family 名称(即指定 least-首选字体)。这些名称在 CSS 字体模块中指定，并且是:

• serif
• 无衬线字体
• 草书
• 幻想
• 等宽

在您的情况下，属性 font: Didot, serif 是“网络安全的”，因为它在末尾具有 serif 通用系列名称。如果您的访问者已经在他们的计算机、手机、平板电脑等设备上安装了 Didot 字体，他们将只能看到正在使用的字体。

如果您确实想使用 Didot，则需要将其发布为 WOFF 文件并使用 @font-face 规则将其添加到您的样式表中:https://css-tricks.com/snippets/css/using-font-face/