@font-face
css 提供的@font-face可以让开发者自定义项目中的字体。字体可以从远程服务器获取，也可以从本地加载。
@font-face {
font-family: "Open Sans";
src:
url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}
参数
- src: 远程字体文件的url，或者本地字体文件的路径
- font-family: 自定义字体文件的名称，在引用该字体文件的font-family后添加。
使用步骤
本文只讨论使用本地字体的场景，远程字体不在本文讨论范围中。
- 下载相关字体文件（阿里字体https://www.iconfont.cn/fonts/index）或者从UI小姐姐那里获取。
- 在项目assets文件加下增加fonts路径，并将字体文件放入。
- 在assets路径下增加style文件夹，并在该文件夹下新建font.less文件
- 在font.less文件中定义@font-face
@font-face {
font-family: 'myFont';
src: url(../fonts/AlimamaShuHeiTi-Bold.ttf);
font-weight: normal;
font-style: normal;
}
- 在main.js中引入自定义字体的less文件
import './assets/style/font.less'
- 在使用到该字体的地方使用font-family来引入字体
h1{
font-family: 'myFont';
}
呈现效果
