1. 程式人生 > >vue 引用自定義ttf、otf、線上字型

vue 引用自定義ttf、otf、線上字型

1. 將下載好的字型放到本地目錄

分別是兩種字型
在這裡插入圖片描述

放到專案的 assets 目錄中
在這裡插入圖片描述

2. 引入字型檔案

首先建立一個 styles 資料夾,之後也可以用於存放一些公共的樣式檔案。再新建一個 index.less 檔案,引入字型。
在這裡插入圖片描述

@font-face {
  font-family: Snickles;
  src: url('../assets/Snickles-webfont.ttf');
}
@font-face {
  font-family: Ronda;
  src: url('../assets/RondaITCbyBT-Roman.otf');
}

3. 在專案中(main.js)引入剛剛載入進來的字型

在這裡插入圖片描述

4. 測試

在這裡插入圖片描述
效果圖:
在這裡插入圖片描述

在這裡插入圖片描述

效果圖:
在這裡插入圖片描述

5. Happy Coding!