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

二、如何引入字体

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.在页面中使用字体

 

Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐