1、先上了张效果:

2、windows 字体的路径:c:/windows/fonts/

我们用华文行楷来测试下,先将华文行楷拷贝到/src/assets/fonts目录下。

3、然后我们来定义css:

@font-face {
font-family: 'fyxk';
font-style: normal;
src: local('Opensans-Bold'), url(/@/assets/fonts/STXINGKA.TTF) format('truetype');
}
.font-fyxk {
font-family: 'fyxk';
font-size: 40px;
}
用@font-face来自定义字体名称,及指定位置。这样我们自定义的 ".font-fyxk"样式就可以了。
测试通过,打包的时候是否存在问题,待测试。