實現匯入谷歌字型

谷歌字型連結：http://www.googlefonts.cn/chinese

App.vue

<style>
  @import '/common/font/font.css';
</style>

main.js

import './common/font/font.css'

font.css

@font-face {  
  font-family: 'HanaleiFill-Regular'; 
  src: url('HanaleiFill-Regular.ttf');  
  font-weight: normal;  
  font-style: normal;  
}
 

ttf檔案為從谷歌下載的字型第三方包

webpack.base.conf.js

{
      test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
      loader: 'url-loader',
      options: {
        limit: 10000,
        name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
      }
    }