无法在类星体框架中加载我自己的字体答案

【问题标题】：Cannot load my own font in quasar framework无法在类星体框架中加载我自己的字体
【发布时间】：2021-02-16 06:35:46
【问题描述】：

我正在为平板电脑构建一个应用程序，我想使用我自己的 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;
}

【问题讨论】：

毫无疑问，您继续前进，但这里有一个非常有用的字体设置站点 google-webfonts-helper 创建 CSS 定义并提供具有许多选项的字体下载集合

标签： javascript css sass fonts quasar-framework

【解决方案1】：

我使用手写笔没有像其他人建议的那样删除任何字体行，而是执行以下步骤：

将字体下载到特定文件夹，即“assets/fonts/plex”
声明字体名称。
在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 安装配置：

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)

【讨论】：

【解决方案2】：

大家好，对于最近版本的人，我的解决方案是：

将您的自定义字体放在这里：

并像这样在 app.scss 中加载它：

在 quasar.conf.js 中，您应该像这样用“roboto-font”注释该行：

希望对你有帮助，干杯！

【讨论】：

【解决方案3】：

从 quasar.config.js 文件中删除“roboto-font”（除非您仍打算将其用作辅助字体）。从 Google 字体中选择一种字体进行导入，或者下载一个字体系列 .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

【讨论】：