无法在 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 文件中删除“roboto-font”（除非您仍打算将其用作辅助字体）。从 Google Fonts 中选择一种字体进行导入，或下载要包含的字体系列 .WOFF 文件。您应该导入字体系列，但它应该进入“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

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

Answer 3

我使用手写笔，没有像其他人建议的那样删除任何字体线，而是通过执行以下步骤：将字体下载到特定文件夹，即“ assets/fonts/plex”声明字体名称。设置$typography-font-family于quasar.variables.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);}类星体.变量.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'类星体安装配置：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)