blocks|key|1714912|text|浏览器有几种方式决定下载/使用哪些字体：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1714913|正如用户Fabrizio+Calderan所称的：|ordered-list-item|1714914|如果没有提供源，则从浏览器中运行网页的计算机加载它们。|blockquote|1714915|程序员使用嵌入字体的外部API或链接。这方面的一个例子是谷歌字体，它允许程序员选择他们想要的字体(并选择它们)，并使用<link>标记(放入HTML代码)或@import标记(放入@import文件)嵌入它们。|offset|length|style|CODE|1714916|​|1714917|📷|atomic|1714918|1714919|您正在查看的网站可能在其CSS中包含@font-face语句，该语句将公共名称(即“源代码专业”)链接到字体文件。您可以阅读更多关于@font-face、这里和这里的信息。|1714920|如果你找不到任何这些证据，你能分享一个链接到网页的源代码吗？|1714921|编辑|BOLD|1714922|我看了一下网站中的代码。看起来显示/文本区域中的字体样式如下：|1714923|.displayArea{
++++font-family:"Lucida+Sans","Lucida+Sans+Regular","Lucida+Grande","Lucida+Sans+Unicode",Geneva,Verdana,sans-serif;
}|code-block|syntax|javascript|1714924|而且，似乎没有这些字体的来源，所以它是我上面列出的第一类的一部分。基本上，引号中的字体是字体，如果已经在客户端的计算机中预装，则浏览器会从列表中向下，并不断检查客户端是否安装了字体。结束字体是sans-serif，这是所有计算机都有的默认字体，因此它作为备份，以防所有其他字体不可用。|1714925|entityMap|0|LINK|mutability|MUTABLE|url|https://fonts.google.com/|1|IMAGE|IMMUTABLE|imageUrl|https://developer.qcloudimg.com/http-save/yehe-900000/bfecc058e610db0c114e812a2175b6a7.png|imageAlt|2|https://www.w3schools.com/cssref/css3_pr_font-face_rule.asp|3|https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face|4|https://master.d330morwp7ex26.amplifyapp.com/^0|0|0|0|1N|6|26|7|2I|7|S|4|0|0|0|0|1|1|0|0|I|A|1U|A|25|2|2|28|2|3|0|0|0|2|0|5|2|4|0|0|2O|A|0^^$0|@$1|2|3|4|5|6|7|1T|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|1U|8|@]|9|@]|A|$]]|$1|E|3|F|5|G|7|1V|8|@]|9|@]|A|$]]|$1|H|3|I|5|D|7|1W|8|@$J|1X|K|1Y|L|M]|$J|1Z|K|20|L|M]|$J|21|K|22|L|M]]|9|@$J|23|K|24|1|25]]|A|$]]|$1|N|3|O|5|6|7|26|8|@]|9|@]|A|$]]|$1|P|3|Q|5|R|7|27|8|@]|9|@$J|28|K|29|1|2A]]|A|$]]|$1|S|3|O|5|6|7|2B|8|@]|9|@]|A|$]]|$1|T|3|U|5|D|7|2C|8|@$J|2D|K|2E|L|M]|$J|2F|K|2G|L|M]]|9|@$J|2H|K|2I|1|2J]|$J|2K|K|2L|1|2M]]|A|$]]|$1|V|3|W|5|6|7|2N|8|@]|9|@]|A|$]]|$1|X|3|Y|5|6|7|2O|8|@$J|2P|K|2Q|L|Z]]|9|@]|A|$]]|$1|10|3|11|5|6|7|2R|8|@]|9|@$J|2S|K|2T|1|2U]]|A|$]]|$1|12|3|13|5|14|7|2V|8|@]|9|@]|A|$15|16]]|$1|17|3|18|5|6|7|2W|8|@$J|2X|K|2Y|L|M]]|9|@]|A|$]]|$1|19|3|-4|5|6|7|2Z|8|@]|9|@]|A|$]]]|1A|$1B|$5|1C|1D|1E|A|$1F|1G]]|1H|$5|1I|1D|1J|A|$1K|1L|1M|-4]]|1N|$5|1C|1D|1E|A|$1F|1O]]|1P|$5|1C|1D|1E|A|$1F|1Q]]|1R|$5|1C|1D|1E|A|$1F|1S]]]]

There are several ways the browser decides what fonts are downloaded/used:
<ol>
<li>As user 'Fabrizio Calderan loves trees' stated (paraphrased):</li>
</ol>
<blockquote>
If no sources are provided, they are loaded from the computer running the webpage in a browser.
</blockquote>
<ol start="2">
<li>The programmer uses external APIs or links that embed a font. An example of this is <a href="https://fonts.google.com/" rel="nofollow noreferrer">Google Fonts</a>, which lets programmers choose fonts they want (and select them), and embed them using either a <code>&lt;link&gt;</code> tag (put into HTML code) or <code>@import</code> tag (put into CSS file).</li>
</ol>
<a href="https://i.stack.imgur.com/qnElk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qnElk.png" alt="enter image description here" /></a>
<ol start="3">
<li>The website you are looking at may contain <code>@font-face</code> statements in their CSS, which links a common name (i.e., 'Source Code Pro') to a font file. You can read more about <code>@font-face</code> <a href="https://www.w3schools.com/cssref/css3_pr_font-face_rule.asp" rel="nofollow noreferrer">here</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face" rel="nofollow noreferrer">here</a>.</li>
</ol>
If you can't find evidence of any of these, could you possibly share a link to the webpage's source code?
EDIT
I took a look at the code in the <a href="https://master.d330morwp7ex26.amplifyapp.com/" rel="nofollow noreferrer">website</a>. It seems like the fonts styling in the display/textarea is:
<pre><code>.displayArea{
 font-family:&quot;Lucida Sans&quot;,&quot;Lucida Sans Regular&quot;,&quot;Lucida Grande&quot;,&quot;Lucida Sans Unicode&quot;,Geneva,Verdana,sans-serif;
}
</code></pre>
And, there doesn't appear to be a source of these fonts, so it is part of the 1st category I listed above. Basically, the fonts in quotes are fonts that may be used if already preinstalled inside the client's computer, if not, the browser goes down the list and keeps checking whether the client has the font installed. The ending font is <code>sans-serif</code>, which is a default font that all computers have, so it serves as a backup in case all other fonts aren't available.

blocks|key|2278455|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2278456|📷|atomic|offset|length|2278457|2278458|正如您在上面的图片中所看到的，我创建了一个sample.html文件，并为body标记使用了字体系列。因此，提供的消息来源在字体-家庭部分中没有提到。结果，字体将从我的windows文件夹中的“字体”文件夹加载。(当然，如果您在本地使用Windows操作系统和网站，就会发生上述过程！)|2278459|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://developer.qcloudimg.com/http-save/yehe-900000/970af202e2a44df21f8884bd5bbfcc3a.png|imageAlt^0|0|0|1|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@$E|U|F|V|1|W]]|A|$]]|$1|G|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|Y|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|Q|R|-4]]]]

<a href="https://i.stack.imgur.com/exnbd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/exnbd.png" alt="enter image description here" /></a>
As you can see in the above picture,I created a sample.html file and used the font-family for the body tag. So the source provided does not mention in font-family section. in the result, fonts will load from &quot;Fonts&quot; folder in my windows folder. (Of course if you use Windows OS and website locally, mentioned process will be happen!)

blocks|key|1715011|text|注意，字体系列列表中的最后一个设置是sans-serif。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1715012|如果本地系统绝对没有在本地加载其他字体，那么系统将使用它设置的默认无衬线字体。|1715013|这就是为什么当你这么说的时候，它看起来就像是“它起作用了”：|1715014|@Fabrizio喜欢树，我用css-tics.com/snippets/css/+system+-字体-堆栈链接检查了系统字体。但是，上述字体系列并不匹配系统字体中的任何字体。所以默认的字体应该选对吗？|blockquote|1715015|你是对的，它选择默认字体，但版本是无衬线。|1715016|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|O|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|P|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|Q|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|R|8|@]|9|@]|A|$]]]|L|$]]

Notice that the last setting in the font-family list is sans-serif.
If the local system has absolutely none of the other fonts loaded locally then the system will use whatever it has set as its default sans-serif font.
That is why it looks as though 'it works' when you say this:
<blockquote>
@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?
</blockquote>
You are right, it picks the default font, but the version that is sans-serif.

I have seen a couple of projects where they just mention the name of the fonts they want to use in the CSS file without any mention of the source or the TTF or other font files.
eg
<pre><code>code {
 font-family: source-code-pro,Menlo,Monaco,Consolas,&quot;Courier New&quot;,monospace
}
</code></pre>
When I remove those fonts via CSS in inspect element I can see the fonts are changed. So the code works. But I don't understand how the browser figures from where the fonts should be downloaded.
The code works even in incognito so not sure if the browser caching the font is a valid explanation.

How are fonts downloaded without any src reference in CSS file

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋 

腾讯云代码助手

CODING DevOps

Cloud Studio

SDK中心

API中心

命令行工具

我见过几个项目，他们只是提到他们想在CSS文件中使用的字体的名称，而没有提到源代码、TTF或其他字体文件。例如code {    font-family: source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace}当我通过检查元素中的CSS删除这些字体时...

问在CSS文件中没有src引用的字体是如何下载的
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在CSS文件中没有src引用的字体是如何下载的EN