菜雞隨筆之新字型新增
阿新 • • 發佈:2022-04-01
記錄在沒事幹瞎寫的時候學到的字型新增。
1、下載字型。
找美工要或者自己去相應的網站上下載所需字型。
2、建立檔案。
在 assets 目錄中建立 fonts 目錄,在fonts目錄中在建立樣式檔案 fonts.css 以及用於存放字型的 fontFigure(名字隨意)資料夾,具體如下:
|-- assets
|-- fonts
|-- fonts.css
|-- fontFigure
|-- cinecaption227.TTF
|-- 千圖筆鋒手寫體.ttf
3、新增字型
(1)將下載好的字型存放到 fontFigure 資料夾中。
(2)font.css 樣式檔案程式碼:
@font-face {
font-family: qtbf_write;
src: url("../fonts/fontFigure/千圖筆鋒手寫體.ttf");
font-weight: normal;
font-style: normal;
}
(3)在main.js中註冊
import "@/assets/fonts/fonts.css";
(4)呼叫
.system_name_title {
height: 100%;
padding: 0 1rem;
display: flex;
align-items: center;
font -size: 2rem;
font-weight: bolder;
font-family: qh-Regular;
}
(5)效果展示
對比原版:
字型原版:
自己系統:
完事,收工!(๑╹◡╹)ノ"""