vue项目中使用特殊字体

vue项目中使用特殊字体

最近项目中需要使用一些特殊字体，字体的效果图如下：

这是一种名叫DINCond-Regular的字体，下面以此为例介绍一下在vue项目中如何使用特殊字体：

1、获取特殊字体文件

首先需要获取特殊字体的源文件，一般由视觉同学给我们提供，字体文件通常是以eot、otf、ttf、woff等作为后缀。对于DINCond-Regular字体，我们使用的是DINCond-Regular.otf文件；

2、对于使用vue-cli脚手架创建的项目，找到src/assets目录，新建一个名叫DINfont的文件夹用于存放特殊字体源文件；创建一个DINfont.css文件用于声明该特殊字体；对于自己手动创建的项目（不使用vue-cli脚手架），也可以通过在项目中创建assets目录，进行上述操作；对于vue-cli2或者vue-cli3创建的项目，脚手架自动帮我们在webpack中添加url-loader处理特殊字体文件，我们不用再处理，但是对于自己手动创建的项目，我们需手动在webpack配置中添加url-loader对字体文件的处理；