3

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

当使用像 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 以及我发现的其他一些奇怪的解决方案,其中涉及将选择器更改为“标题 h1,标题 h1 *”,但什么也没做。

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

4

1 回答 1

5

当使用应该是网络安全的字体时,如Didot, 并使用...

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

    • Didot包含在 macOS,这可能会导致一些网页设计师认为它也可以在其他平台(如 Windows、Linux 和 Android)上使用,或者这些平台具有自动映射的等价物(如有多少浏览器会将 Helvetica 映射到 Arial) ,但是不能保证。
      • 此外,仅仅因为操作系统中包含字体并不意味着它被授权给您在商业上或在网站中使用- 您可能会因为在没有自己的字体许可证的情况下将操作系统许可的字体发布到公共网络上而被起诉。
  • “网络安全”字体是大多数现代浏览器广泛安装和支持的字体,无需额​​外下载或安装字体。

    • 许多字体被广泛安装,例如Microsoft 的 Web 核心字体,它预装在所有 Windows 计算机上 - 以及许多其他操作系统(例如 macOS)要么带有相同的字体,要么具有非常相似的等效字体(例如 Helvetica 而不是 Arial),它们是由浏览器自动映射。
  • 确定字体是否“网络安全”的唯一方法是通过自己的工作并手动检查目标用户的所有或大部分设备是否有该字体可用。您可以在 Wikipedia 和其他网站上查看字体可用性:

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

并且任何font-family列表都可以通过在末尾添加 CSS 后备通用系列名称(即指定最不喜欢的字体)来“安全”。这些名称在 CSS 字体模块中指定,它们是:

  • serif
  • sans-serif
  • cursive
  • fantasy
  • monospace

在您的情况下,该属性font: Didot, serif是“网络安全的”,因为它最后具有serif通用系列名称。Didot您的访问者只有在他们的计算机、手机、平板电脑等上已经安装了该字体时才会看到正在使用的字体。

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

于 2020-07-30T22:46:21.227 回答