无法在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;
}

- acroscene

---

毫无疑问，你可能已经继续前进了，但这里有一个非常实用的字体设置网站——google-webfonts-helper。它可以生成CSS定义，并且还提供了多种选项的字体下载集合。 - bvj

Answer 1

从quasar.config.js文件中删除“roboto-font”（除非您仍然打算将其用作辅助字体）。

要导入字体，请从Google Fonts中选择一个字体，或下载字体族.woff文件进行包含。

与文档类似（https://quasar.dev/style/typography#Add-custom-fonts），您应该导入字体族，但它应该放在'src/css/quasar.variables.*'文件中。 然后，更改一个或多个默认样式变量。

以下示例假定使用Sass：

// Example: Import Open Sans with multiple weights
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800&display=swap')

// Set the default font-family
$typography-font-family : 'Open Sans', sans-serif !default

// Fix font-weight values to match the imported font family weights
$text-weights: (thin: 300, light: 400, regular: 600, medium: 700, bold: 800, bolder: 800) !default
$button-font-weight: 600 // or 400 if you prefer thinner

- Aditya Vikram Verma

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- 在 ./quasar.config.js 中注释掉 roboto-font

 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
    ],

- javad asghari

Answer 3

大家好，如果您使用的是最新版本，我的解决方案是：

在此处放置您的自定义字体： 例如在app.scss中这样加载它： 并且在quasar.conf.js文件中，您应该像这样注释带有“roboto-font”的行： 希望能对您有所帮助，谢谢！

- Danny

Answer 4

我使用 stylus，不像其他人建议的那样删除任何字体行，而是通过以下步骤实现：

1. 下载字体到特定文件夹，例如 'assets/fonts/plex'
2. 声明字体名称。
3. 在 quasar.variables.styl 中设置 $typography-font-family

app.styl:

// app global css in Stylus form

@font-face {
  font-family: plex;
  src: url(../assets/fonts/plex/IBM-Plex-Sans-Arabic/fonts/complete/woff/IBMPlexSansArabic-Regular.woff);
}

quasar.variables.styl:

// Quasar Stylus Variables
// --------------------------------------------------
// To customize the look and feel of this app, you can override
// the Stylus variables found in Quasar's source Stylus files.

// Check documentation for full list of Quasar variables

// Your own variables (that are declared here) and Quasar's own
// ones will be available out of the box in your .vue/.styl files

// It's highly recommended to change the default colors
// to match your app's branding.
// Tip: Use the "Theme Builder" on Quasar's documentation website.

$primary   = #1976D2
$secondary = #26A69A
$accent    = #9C27B0

$dark      = #1D1D1D

$positive  = #21BA45
$negative  = #C10015
$info      = #31CCEC
$warning   = #F2C037

$typography-font-family = 'plex'

quasar install config:

App dir........... /home/abuabdellah/work/.../quasar
    App URL........... http://localhost:8080
    Dev mode.......... spa
    Pkg quasar........ v1.15.23
    Pkg @quasar/app... v2.2.10
    Transpiled JS..... yes (Babel)

- WPPlumber