• 在网上下载好字体包
  • 在static下新建文件夹,名字自定义,用来存放字体包
  • 在新建好的文件夹下新建一个css文件,同样名称自定义
    在这里插入图片描述
  • 检查自己的 webpack.base.conf.js 文件,是否有如下代码,没有需要自己写上
{
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
 }
  • 打开刚才新建的 css 文件
@font-face{
  font-family: '思源黑体';
  src: url('../siyuan/SourceHanSansCN-Normal-2.otf');
  font-weight: normal;
  font-style: normal;
}
  • 接着在main.js文件中引入css文件
import '../static/siyuan/font.css'
  • 在需要设置该字体的位置写font-family:'思源黑体' 就可以了
Logo

Vue社区为您提供最前沿的新闻资讯和知识内容

更多推荐