使用第三方字体

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]')
   }
  }
 ]
}
           

我未曾如此设置，照样生效。