字体文件在控制台上显示为未找到，并且在页面加载时未立即呈现
Posted
技术标签:
【中文标题】字体文件在控制台上显示为未找到，并且在页面加载时未立即呈现【英文标题】：Font files showing as not found on console and not rendering immediately on page load 【发布时间】：2021-04-01 06:23:48 【问题描述】：我有一个字体文件夹，其中包含字体文件到字体lemonmilk:
我现在有两个问题：
-
在检查控制台时，我收到以下 404 错误：
/fonts/lemonmilk-medium.woff net::ERR_ABORTED 404 (Not Found)
加载页面时，字体系列不会立即加载，页面加载后会更改为正确的字体。
为了解决问题 2，我尝试添加 font-display 和 unicode-range，但仍然看到相同的结果。
这是我定义font-face的方式：
$font-families: (
'lemonmilk-regular': 'lemonmilk-regular',
'lemonmilk-light': 'lemonmilk-light',
'lemonmilk-medium': 'lemonmilk-medium',
'lemonmilk-bold': 'lemonmilk-bold',
);
@each $key, $val in $font-families
@font-face
font-family: #$key;
src: url('../fonts/#$val.eot');
src: url('../fonts/#$val.eot?#iefix') format('embedded-opentype'),
url('../fonts/#$val.woff') format('woff'),
url('../fonts/#$val.woff2') format('woff2'),
url('../fonts/#$val.ttf') format('truetype'),
url('../fonts/#$val.svg#sansationregular') format('svg');
font-style: normal;
font-display: swap;
unicode-range: U+00-FF;
字体文件存在所以不确定为什么它给我一个 404 错误，我不确定如何进一步优化字体加载速度？
【问题讨论】：
【参考方案1】：关于 html 文件路径
以下假设基于您的 style.css 文件位于 Wordpress 主题根目录中。
style.css应该位于主题的根目录而不是 CSS 目录中。 [...]
来源@https://developer.wordpress.org/themes/basics/organizing-theme-files/#theme-folder-and-file-structure
您的问题似乎是因为您要求您的 css 文件在错误的目录中搜索您的字体。
文件路径描述了文件在网站文件夹结构中的位置。
<img src="picture.jpg">= “picture.jpg”文件与当前页面位于同一文件夹中。<img src="images/picture.jpg">= “picture.jpg”文件位于当前文件夹的 images 文件夹中。<img src="/images/picture.jpg">= “picture.jpg”文件位于当前网站根目录的 images 文件夹中。<img src="../picture.jpg">= “picture.jpg”文件位于当前文件夹的上一级文件夹中。
来源@https://www.w3schools.com/html/html_filepaths.asp
当前您正在尝试在“当前文件夹的上一级文件夹”中查找您的字体文件（第 4 种情况）。您需要在“当前网站的根目录”中查找您的字体（第三种情况）。您可能唯一需要做的就是将双点破折号../ 更改为简单的破折号/。
url('/fonts/#$val.eot');.
错误的方式 = url('../fonts/#$val.eot');.关于优化网页字体加载和渲染：
1. 浏览器开始解析 HTML 响应并构建 DOM。2. 浏览器发现 CSS、JS 和其他资源并分派请求。 3. 浏览器执行布局并将内容绘制到屏幕上。字体可用后，浏览器会绘制文本像素。（这是正在发生的事情的简明版本）
默认情况下，只有在开始解析 HTML 并找到 css 文件后才会显示字体。我们希望字体与 HTML 同时被解析，为此我们需要将我们的字体加载请求移动到 header.php 中的 <head> 标记中，并要求我们的浏览器使用 <link rel="preload"> 预加载我们的字体。
<link>元素的 rel 属性的预加载值让您 在 HTML 的<head>中声明获取请求，指定资源 您的页面将很快需要，您希望尽早开始加载 在页面生命周期中，在浏览器的主要渲染机制启动之前 in. 这确保它们更早可用并且不太可能 阻止页面的渲染，提高性能。
来源@https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content
最后，我强烈推荐使用 CDN，也许还可以使用像 Google Fonts 这样的字体库。简而言之，Google Fonts 通过将字体保存在用户的浏览器中，让网站可以在任何和所有使用 Google Fonts 的网站上交叉共享字体（数百万）。
如果用户使用托管在Google Fonts 上的名为font 1 的字体访问名为website 1 的网站，该用户将自动下载并存储它。使用 Google 字体中的 font 1 访问 website 2 后，字体加载将是即时的。
【讨论】：
以上是关于字体文件在控制台上显示为未找到，并且在页面加载时未立即呈现的主要内容，如果未能解决你的问题，请参考以下文章
java运行结果是一个list，打印在控制台上，怎么把它显示在一个jsp页面