如何在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.在页面中使用字体
更多推荐
已为社区贡献3条内容
所有评论(0)