如何在电子/React应用程序中预加载字体？

发布于 2025-02-11 11:37:28 字数 888 浏览 1 评论 0原文

我正在使用Electron-Forge，无法弄清楚如何制作相对于构建的路径。

之后的摘要在开发模式下工作，但在生产模式下不工作。

<!DOCTYPE html>
<html lang="en" data-color-scheme="auto">
  <head>
    <link
      rel="preload"
      href="/c5c3959c04004102ea46.woff2"
      as="font"
      crossorigin="anonymous"
    />
    <link
      rel="preload"
      href="/535bc89d4af715503b01.woff2"
      as="font"
      crossorigin="anonymous"
    />
    <meta charset="utf-8" />
    <title>Test app</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

这些是引发的错误：

index.html:1          GET file:///c5c3959c04004102ea46.woff2 net::ERR_FILE_NOT_FOUND
index.html:1          GET file:///535bc89d4af715503b01.woff2 net::ERR_FILE_NOT_FOUND

感谢您的帮助！

原文

I’m using electron-forge and can’t figure out how to make paths relative to build.

Following snippet works in development mode, but not in productions mode.

<!DOCTYPE html>
<html lang="en" data-color-scheme="auto">
  <head>
    <link
      rel="preload"
      href="/c5c3959c04004102ea46.woff2"
      as="font"
      crossorigin="anonymous"
    />
    <link
      rel="preload"
      href="/535bc89d4af715503b01.woff2"
      as="font"
      crossorigin="anonymous"
    />
    <meta charset="utf-8" />
    <title>Test app</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

These are the errors thrown:

index.html:1          GET file:///c5c3959c04004102ea46.woff2 net::ERR_FILE_NOT_FOUND
index.html:1          GET file:///535bc89d4af715503b01.woff2 net::ERR_FILE_NOT_FOUND

Thanks for helping out!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

流星番茄 2025-02-18 11:37:28

由于您的电子应用程序将以不同的目录构建，因此您的用户在其选择的任何OS上的任何目录中的任何驱动器上运行，对文件路径的引用必须是相对的（不是绝对）。

以下是您的＆lt; link＆gt; href的示例，取决于典型的目录结构。

示例1

平面渲染过程目录结构。

Project Root
 ├── src
 |   ├── main-process
 |   └── render-process
 |       ├── index.html
 |       ├── c5c3959c04004102ea46.woff2
 |       └── 535bc89d4af715503b01.woff2
 └── package.json

index.html（渲染过程）

<link rel="preload" href="c5c3959c04004102ea46.woff2" as="font" crossorigin="anonymous" />
<link rel="preload" href="535bc89d4af715503b01.woff2" as="font" crossorigin="anonymous" />

示例2

向下渲染过程目录结构。

Project Root
 ├── src
 |   ├── main-process
 |   └── render-process
 |       ├── index.html
 |       └── fonts
 |           ├── c5c3959c04004102ea46.woff2
 |           └── 535bc89d4af715503b01.woff2
 └── package.json

index.html（渲染过程）

<link rel="preload" href="fonts/c5c3959c04004102ea46.woff2" as="font" crossorigin="anonymous" />
<link rel="preload" href="fonts/535bc89d4af715503b01.woff2" as="font" crossorigin="anonymous" />

示例3

up/down 渲染过程目录结构。

注意使用../
这会使您提高一个文件夹级别。
从html（文件夹） - ＆gt;到Render-Process（文件夹）。

Project Root
 ├── src
 |   ├── main-process
 |   └── render-process
 |       ├── html
 |       |   └── index.html
 |       └── fonts
 |           ├── c5c3959c04004102ea46.woff2
 |           └── 535bc89d4af715503b01.woff2
 └── package.json

index.html（渲染过程）

<link rel="preload" href="../fonts/c5c3959c04004102ea46.woff2" as="font" crossorigin="anonymous" />
<link rel="preload" href="../fonts/535bc89d4af715503b01.woff2" as="font" crossorigin="anonymous" />

示例4

更深的上/下渲染过程目录结构。

注意使用../../
这使您提高两个文件夹级别。
从main（文件夹） - ＆gt;到HTML（文件夹） - ＆gt;到Render-Process（文件夹）。

Project Root
 ├── src
 |   ├── main-process
 |   └── render-process
 |       ├── html
 |       |   └── main
 |       |       └── index.html
 |       └── css
 |           └── fonts
 |               ├── c5c3959c04004102ea46.woff2
 |               └── 535bc89d4af715503b01.woff2
 └── package.json

index.html（渲染过程）

<link rel="preload" href="../../css/fonts/c5c3959c04004102ea46.woff2" as="font" crossorigin="anonymous" />
<link rel="preload" href="../../css/fonts/535bc89d4af715503b01.woff2" as="font" crossorigin="anonymous" />

As your Electron application will be built in a different directory, run by your user(s) on any drive in any directory on any OS of their choosing, reference to file paths must be relative (not absolute).

Below are examples of what your <link> href would look like depending on a typical directory structure.

Example 1

Flat render-process directory structure.

Project Root
 ├── src
 |   ├── main-process
 |   └── render-process
 |       ├── index.html
 |       ├── c5c3959c04004102ea46.woff2
 |       └── 535bc89d4af715503b01.woff2
 └── package.json

index.html (render process)

<link rel="preload" href="c5c3959c04004102ea46.woff2" as="font" crossorigin="anonymous" />
<link rel="preload" href="535bc89d4af715503b01.woff2" as="font" crossorigin="anonymous" />

Example 2

Downwards render-process directory structure.

Project Root
 ├── src
 |   ├── main-process
 |   └── render-process
 |       ├── index.html
 |       └── fonts
 |           ├── c5c3959c04004102ea46.woff2
 |           └── 535bc89d4af715503b01.woff2
 └── package.json

index.html (render process)

<link rel="preload" href="fonts/c5c3959c04004102ea46.woff2" as="font" crossorigin="anonymous" />
<link rel="preload" href="fonts/535bc89d4af715503b01.woff2" as="font" crossorigin="anonymous" />

Example 3

Up / down render-process directory structure.

Note use of the ../
This moves you up one folder level.
Up from html (folder) -> to render-process (folder).

Project Root
 ├── src
 |   ├── main-process
 |   └── render-process
 |       ├── html
 |       |   └── index.html
 |       └── fonts
 |           ├── c5c3959c04004102ea46.woff2
 |           └── 535bc89d4af715503b01.woff2
 └── package.json

index.html (render process)

<link rel="preload" href="../fonts/c5c3959c04004102ea46.woff2" as="font" crossorigin="anonymous" />
<link rel="preload" href="../fonts/535bc89d4af715503b01.woff2" as="font" crossorigin="anonymous" />

Example 4

An even deeper up / down render-process directory structure.

Note use of the ../../
This moves you up two folder levels.
Up from main (folder) -> to html (folder) -> to render-process (folder).

Project Root
 ├── src
 |   ├── main-process
 |   └── render-process
 |       ├── html
 |       |   └── main
 |       |       └── index.html
 |       └── css
 |           └── fonts
 |               ├── c5c3959c04004102ea46.woff2
 |               └── 535bc89d4af715503b01.woff2
 └── package.json

index.html (render process)

<link rel="preload" href="../../css/fonts/c5c3959c04004102ea46.woff2" as="font" crossorigin="anonymous" />
<link rel="preload" href="../../css/fonts/535bc89d4af715503b01.woff2" as="font" crossorigin="anonymous" />

回复收藏 0 原文

~没有更多了~