首先要找一个免费网站,去下载你想用的字体,推荐 DaFont - Download fonts
或者问UI要,ui在设计图的时候也会下载对应的特殊字体的包,所以问她要方便快捷 ~~
如果是进入网站下载的话,操作步骤如下:
在官网的右上角输入你想下载的字体名称,点击后面的搜索按钮
点击下载即可
下载完事之后再解压,是对应字体的四种类型
在项目中使用:
在vue项目中的assets文件夹下,新建一个font文件夹,将这四个文件放进去
然后再新建一个font.css文件,里面编写字体变量
@font-face {
font-family: "DS-DIGI";
src: url('./DS-DIGI.TTF');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "DS-DIGIB";
src: url('./DS-DIGIB.TTF');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "DS-DIGII";
src: url('./DS-DIGII.TTF');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "DS-DIGIT";
src: url('./DS-DIGIT.TTF');
font-weight: normal;
font-style: normal;
}
然后再main.js中引入font.css
import '@/assets/font/font.css'
在页面中使用,直接用font-family后面跟上你在font.css中定义的名称即可
我们分别使用了这四种效果,就可以选择一个好看的来引入喽!