1. 程式人生 > 其它 >菜雞隨筆之新字型新增

菜雞隨筆之新字型新增

記錄在沒事幹瞎寫的時候學到的字型新增。

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)效果展示

 

 對比原版:

字型原版:   

自己系統: 

 

 

 

完事,收工!(๑╹◡╹)ノ"""