如何在vue中引入字体

一、 为什么要引入字体
在前端开发中，选用合适的字体往往会极大地提升网站的视觉体验。然而，网页中默认字体的种类和风格有限，且在不同的设备、浏览器上渲染效果不尽相同。因此，很多开发者会选择自定义字体来提升用户体验。

二、如何引入字体

1.搜索下载需要的字体： https://www.dafont.com/theme.php

2.在vue项目下的src/assets文件夹下创建font文件夹，放入需要用的字体并新建font.css 

 

3.font.css写入如下代码

@font-face {
    font-family:"MyFont"; //自定义字体名称
    src: url('./micross.ttf'); //引入字体路径
    font-weight: normal; //字体粗细
    font-style: normal;//字体风格
}

4.在main.js中引入刚才创建的css文件

// 引入字体样式
import "@/assets/font/font.css"

5.在页面中使用字体