使用第三方字型

1：下載下傳第三方的檔案 例如：DINCondensed.ttf

2：将字型檔案放在項目中

3：在common.css中引入字型檔案

@font-face {
    font-family: dincondensed;
    src: url('./DINCondensed.ttf') format('truetype');
}

           

4:使用該字型

.swiper-pagination-custom, .curPagination, .numberFont, .bsRspan, .chartNumber, .chartYearSpanDom {
    font-family: dincondensed !important;
}

           

注意：我已開始将字型檔案放在其他目錄，在common.css中引入時，浏覽器老是報錯404，用不了該字型，後來我将字型檔案和common.css放在同級目錄下，此問題解決！

另：我是在vue項目中使用該字型的，網上說還需要在webpack中進行如下配置：

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

我未曾如此設定，照樣生效。