2 回答

TA貢獻(xiàn)1821條經(jīng)驗(yàn) 獲得超5個(gè)贊
從 quasar.config.js 文件中刪除“roboto-font”(除非您仍打算將其用作輔助字體)。從 Google Fonts 中選擇一種字體進(jìn)行導(dǎo)入,或下載要包含的字體系列 .WOFF 文件。
您應(yīng)該導(dǎo)入字體系列,但它應(yīng)該進(jìn)入“src/css/quasar.variables.*”文件。然后,更改一個(gè)或多個(gè)默認(rèn)樣式變量。
我將假設(shè)使用 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

TA貢獻(xiàn)1810條經(jīng)驗(yàn) 獲得超4個(gè)贊
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
],

TA貢獻(xiàn)1786條經(jīng)驗(yàn) 獲得超13個(gè)贊
我使用手寫筆,沒(méi)有像其他人建議的那樣刪除任何字體線,而是通過(guò)執(zhí)行以下步驟:
將字體下載到特定文件夾,即“
assets/fonts/plex
”聲明字體名稱。
設(shè)置
$typography-font-family
于quasar.variables.styl
應(yīng)用程序風(fēng)格:
// 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)
添加回答
舉報(bào)