CSS 文件中如何在没有任何 src 引用的情况下下载字体
How are fonts downloaded without any src reference in CSS file
我见过几个项目，他们只提到了他们想在 CSS 文件中使用的字体的名称，而没有提到源或 TTF 或其他字体文件。
例如
code {
font-family: source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace
}
当我在检查元素中通过 CSS 删除这些字体时，我可以看到字体已更改。所以代码有效。但是我不明白浏览器是如何判断应该从哪里下载字体的。
该代码即使在隐身模式下也能正常工作，所以不确定浏览器缓存字体是否是一个有效的解释。
浏览器决定字体的方式有多种downloaded/used:
- 正如用户 'Fabrizio Calderan loves trees' 所述（释义）：
If no sources are provided, they are loaded from the computer running the webpage in a browser.
- 程序员使用外部 API 或嵌入字体的 links。这方面的一个例子是 Google Fonts，它允许程序员选择他们想要的字体（和 select 它们），并使用
<link> 标签嵌入它们（放入 HTML 代码）或 @import 标签（放入 CSS 文件）。
- 您正在查看的网站可能在其 CSS 中包含
@font-face 语句，其中 link 是字体文件的常用名称（即 'Source Code Pro'）。您可以阅读更多关于 @font-face here and here.
如果您找不到任何这些的证据，您能否分享一个 link 到网页的源代码？
编辑
我看了一下website中的代码。 display/textarea 中的字体样式似乎是：
.displayArea{
font-family:"Lucida Sans","Lucida Sans Regular","Lucida Grande","Lucida Sans Unicode",Geneva,Verdana,sans-serif;
}
而且，似乎没有这些字体的来源，所以它属于我上面列出的第一个类别。基本上，引号中的字体是 可能 如果已经预装在客户端计算机中的字体，如果没有，浏览器会在列表中查找并不断检查客户端是否安装了该字体。结尾字体是 sans-serif，这是所有计算机都有的默认字体，因此它可以作为备用字体，以防所有其他字体不可用。
正如您在上图中看到的，我创建了一个 sample.html 文件并使用 font-family 作为 body 标签。所以提供的来源没有在字体系列部分提到。结果，字体将从我的 windows 文件夹中的“Fonts”文件夹加载。 （当然如果你在本地使用 Windows OS 和网站，就会发生上述过程！）
注意 font-family 列表中的最后一个设置是 sans-serif。
如果本地系统绝对有 none 本地加载的其他字体，则系统将使用它设置为默认无衬线字体的任何字体。
这就是为什么当你这样说时它看起来好像 'it works':
@Fabrizio Calderan loves trees I checked the system fonts with this css-tricks.com/snippets/css/system-font-stack link. But the mentioned font family is not matching any of the fonts in the system fonts. So the default font should be picked right?
你是对的，它选择了默认字体，但是版本是 sans-serif。
我见过几个项目，他们只提到了他们想在 CSS 文件中使用的字体的名称，而没有提到源或 TTF 或其他字体文件。 例如
code {
font-family: source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace
}
当我在检查元素中通过 CSS 删除这些字体时，我可以看到字体已更改。所以代码有效。但是我不明白浏览器是如何判断应该从哪里下载字体的。
该代码即使在隐身模式下也能正常工作，所以不确定浏览器缓存字体是否是一个有效的解释。
浏览器决定字体的方式有多种downloaded/used:
- 正如用户 'Fabrizio Calderan loves trees' 所述（释义）：
If no sources are provided, they are loaded from the computer running the webpage in a browser.
- 程序员使用外部 API 或嵌入字体的 links。这方面的一个例子是 Google Fonts，它允许程序员选择他们想要的字体（和 select 它们），并使用
<link>标签嵌入它们（放入 HTML 代码）或@import标签（放入 CSS 文件）。
- 您正在查看的网站可能在其 CSS 中包含
@font-face语句，其中 link 是字体文件的常用名称（即 'Source Code Pro'）。您可以阅读更多关于@font-facehere and here.
如果您找不到任何这些的证据，您能否分享一个 link 到网页的源代码？
编辑
我看了一下website中的代码。 display/textarea 中的字体样式似乎是：
.displayArea{
font-family:"Lucida Sans","Lucida Sans Regular","Lucida Grande","Lucida Sans Unicode",Geneva,Verdana,sans-serif;
}
而且，似乎没有这些字体的来源，所以它属于我上面列出的第一个类别。基本上，引号中的字体是 可能 如果已经预装在客户端计算机中的字体，如果没有，浏览器会在列表中查找并不断检查客户端是否安装了该字体。结尾字体是 sans-serif，这是所有计算机都有的默认字体，因此它可以作为备用字体，以防所有其他字体不可用。
正如您在上图中看到的，我创建了一个 sample.html 文件并使用 font-family 作为 body 标签。所以提供的来源没有在字体系列部分提到。结果，字体将从我的 windows 文件夹中的“Fonts”文件夹加载。 （当然如果你在本地使用 Windows OS 和网站，就会发生上述过程！）
注意 font-family 列表中的最后一个设置是 sans-serif。
如果本地系统绝对有 none 本地加载的其他字体，则系统将使用它设置为默认无衬线字体的任何字体。
这就是为什么当你这样说时它看起来好像 'it works':
@Fabrizio Calderan loves trees I checked the system fonts with this css-tricks.com/snippets/css/system-font-stack link. But the mentioned font family is not matching any of the fonts in the system fonts. So the default font should be picked right?
你是对的，它选择了默认字体，但是版本是 sans-serif。