如何使用@font-face

@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后添加。

使用步骤

本文只讨论使用本地字体的场景，远程字体不在本文讨论范围中。

1. 下载相关字体文件（阿里字体https://www.iconfont.cn/fonts/index）或者从UI小姐姐那里获取。
2. 在项目assets文件加下增加fonts路径，并将字体文件放入。
   
3. 在assets路径下增加style文件夹，并在该文件夹下新建font.less文件
   
4. 在font.less文件中定义@font-face

@font-face {
   
    font-family: 'myFont';
    src: url(../fonts/AlimamaShuHeiTi-Bold.ttf);
    font-weight: normal;
    font-style: normal;
}

5. 在main.js中引入自定义字体的less文件

import './assets/style/font.less'

6. 在使用到该字体的地方使用font-family来引入字体

h1{
   
  font-family: 'myFont';
}

呈现效果