无法在 quasar 框架中加载我自己的字体

Question

我正在构建一个仅适用于平板电脑的应用程序，我想使用我自己的 ttf 格式的字体。如何将 .ttf 字体加载到 quasar 中？

另一种选择是将其转换为 woff？

我在 app.scss 中尝试过此操作，但它不起作用：

@font-face {
  font-family: 'MyFont';
  src: url('css/fonts/MyFont.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
}

.my-custom-font {
  font-family: 'Cookies', Fallback sans-serif;
}

Answer 1

从 quasar.config.js 文件中删除 \xe2\x80\x98roboto-font\xe2\x80\x99（除非您仍打算将其用作辅助字体）。\n从 Google Fonts 中选择一种字体进行导入，或者下载要包含的字体系列 .WOFF 文件。

\n

与文档（https://quasar.dev/style/typography#Add-custom-fonts）类似，您应该导入字体系列，但它应该进入 \xe2\x80\x98src/css/quasar.variables .*\xe2\x80\x99 文件。然后，更改一个或多个默认样式变量。

\n

I\xe2\x80\x99m 将假设 Sass 作为以下示例：

\n

// Example: Import Open Sans with multiple weights\n@import url(\'https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800&display=swap\')\n\n// Set the default font-family\n$typography-font-family : \'Open Sans\', sans-serif !default\n\n// Fix font-weight values to match the imported font family weights\n$text-weights: (thin: 300, light: 400, regular: 600, medium: 700, bold: 800, bolder: 800) !default\n$button-font-weight: 600 // or 400 if you prefer thinner\n

\n

Answer 2

1-将字体文件放入 ./src/css/fonts 文件夹中

2-在./src/css/app.css中声明字体名称

@font-face {
  font-family: "vazir";
  font-style: normal;
  font-weight: 400;
  src: url("./fonts/Vazir-Medium.woff2") format("woff2"),
    url("./fonts/Vazir-Medium.ttf") format("truetype"),
    url("./fonts/Vazir-Medium.woff") format("woff");
  font-display: swap;
}

3-在./src/css/quasar.variables.scss中定义字体

$primary: #1976d2;
$secondary: #26a69a;
$accent: #9c27b0;

$dark: #1d1d1d;
$dark-page: #121212;

$positive: #21ba45;
$negative: #c10015;
$info: #31ccec;
$warning: #f2c037;

$typography-font-family: "vazir";

4-Comment robots-font inside ./quasar.config.js

 extras: [
      // 'ionicons-v4',
      // 'mdi-v5',
      // 'fontawesome-v6',
      // 'eva-icons',
      // 'themify',
      // 'line-awesome',
      // 'roboto-font-latin-ext', // this or either 'roboto-font', NEVER both!
      //"vazir",
      // "roboto-font", // optional, you are not bound to it
      "material-icons", // optional, you are not bound to it
    ],