vue-cli3.0 引入外部字體並使用

遇到要在項目中引入一些外部字體，我使用的是思源字體

cli2的我還沒試過，現在的方法是cli3的， 不用配置config文件就可以

第一步： 去下載想要引入的字體的字體包，找ui要或者網上自己去搜

第二步：將要的字體放在資源目錄下，看自己項目需求要放哪里，創建一個css文件

第三步： 在fonts.css文件中引入想要的字體

// 這是fonts.css 可以設置多種字體
// 注意：font-family: 'XXX'; 將字體名字自定義為XXX,使用時要用這個名字
 
@font-face {
  font-family: 'Medium';
  src: url('./SourceHanSansSC-Medium.otf');
}
 
@font-face {
  font-family: 'Regular';
  src: url('./SourceHanSansSC-Regular.otf');
}

第四步：在項目的main.js文件中引入剛寫好的css文件，路徑記得對應上自己項目中的路徑

// main.js中引入外部字體
import './assets/fonts/fonts.css'

最后一步： 直接在vue文件中的樣式添加字體樣式

.text {
  font-family: 'Regular'; // 這里的Regular是引入時的自定義名字
}

轉載：https://www.cnblogs.com/liandudu/p/14154499.html