自定义字体在 Tauri 中无法正确加载

Question

我正在尝试在我的 Tauri 应用程序中使用自定义字体（Figre）。对于某些元素，字体可以正确加载，但对于其他元素则不能。我的代码如下。

HTML：

<!DOCTYPE html>
<html>
  <head>
    <title>Window title</title>
    <link href="/style.css" rel="stylesheet"/>
  </head>
  <body>
    <div data-tauri-drag-region id="title-bar">
      <p id="title-bar-title">Window title</p>
      <button class="title-bar-button">Minimize</button>
      <button class="title-bar-button">Maximize</button>
      <button class="title-bar-button">Close</button>
    </div>
    <h1>This is a test.</h1>
  </body>
</html>

CSS：

:root {
  font-size: 20px;
}

*, ::after, ::before {
  appearance: none;
  box-sizing: border-box;
  font-family: "Figtree" !important;
  text-rendering: optimizeLegibility;
  user-select: none;
}

body {
  display: flex;
  flex-direction: column;
}

#title-bar {
  display: flex;
}

#title-bar-title {
  display: block;
  flex: 1 1;
  text-align: center;
}

.title-bar-button {
  flex: 0 0;
}

@font-face {
  font-display: block;
  font-family: "Figtree";
  src: url("/assets/Figtree[wght].woff2");
}

@font-face {
  font-display: block;
  font-family: "Figtree";
  font-style: italic;
  src: url("/assets/Figtree-Italic[wght].woff2");
}

我的目标是对我的应用程序中的所有元素使用 Figtree 字体。但是，使用上述代码，

h1

元素会按预期显示（使用 Figre 字体且字体粗细为 700），但所有其他包含文本的页面元素不会显示。当删除 CSS 代码中的

!important

时，没有任何元素以 Figtree 字体显示，这让我想知道用户代理样式表是否与此有关。

使用“检查元素”功能，我已经验证样式表和字体文件是否已正确加载。在“字体”选项卡下，所有元素都显示为具有Figtree字体，但正如前面指出的，并非所有元素实际上都显示为这种字体，而是使用后备无衬线字体。

我正在使用 WOFF2 格式的 Figtree 字体 1.5 版和 2.0.3 版 Tauri 版本。我的操作系统是 Linux Mint 版本 21.2。

编辑：我忘记添加这个（我没有复制粘贴代码），但是标题栏

div

具有

data-tauri-drag-region

属性，这使得它的行为就像本机标题栏。可能很重要？

Tauri 应用截图：

Answer 1

这是我在 github 上使用自定义窗口和自定义字体重新创建的演示项目，我在 Mac 上测试了它，所有部分似乎都工作正常。包括 Figtree 字体。

https://github.com/developermindsetcom/tauri-custom-font

这里

styles.css

:root {
  font-family: Figtree;
//...

@font-face {
  font-display: block;
  font-family: "Figtree";
  src: url("/assets/fonts/Figtree-Regular.woff2");
}

@font-face {
  font-display: block;
  font-family: "Figtree";
  font-style: italic;
  src: url("/assets/fonts/Figtree-Italic.woff2");
}

同时将

decorations

设置在

tauri.conf.json

内：

"windows": [
      {
        "decorations": false,
        "fullscreen": false,
        "resizable": true,
        "title": "custom-font",
        "width": 800,
        "height": 600
      }
]

还有

plugin-window

，因为我使用的是 Tauri v2（alpha）：

"plugins": {
    "window": {
      "all": false,
      "close": true,
      "hide": true,
      "show": true,
      "maximize": true,
      "minimize": true,
      "unmaximize": true,
      "unminimize": true,
      "startDragging": true
    },
...

这是我添加的一些分步教程。

请告诉我是否可以在您的 Linux Mint 上构建并运行。

自定义字体在 Tauri 中无法正确加载

问题描述投票：0回答：1

1个回答

最新问题

自定义字体在 Tauri 中无法正确加载

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1