欢迎访问 生活随笔!

生活随笔

当前位置: 首页 > 前端技术 > vue >内容正文

vue

vue全局自定义字体,提高项目字体美化

发布时间:2023/12/8 vue 31 豆豆
生活随笔 收集整理的这篇文章主要介绍了 vue全局自定义字体,提高项目字体美化 小编觉得挺不错的,现在分享给大家,帮大家做个参考.


💌 作者简介

  • 📖 个人介绍:小伙伴们,大家好!我是水香木鱼,【前端领域创作者】😜
  • 📜 CSDN主页:水香木鱼
  • 📑 个人博客:陈春波
  • 🎨 系列专栏:后台管理系统
  • 🌹 一键四连:关注💋+点赞👍+收藏⭐+留言📝
  • 📢 人生箴言:即使没有万全准备,也要勇敢迈出第一步。

  • 📢: 我们在项目开发时.或多或少 会给项目 添加全局字体;
    添加字体的最佳方案,请看 👇 👇 👇 四步成功引入

    1、创建font文件夹

    在assets 静态资源文件夹中,新建font 文件夹

    //目录结构 ├──node_modules ├──public ├──src ├ ├──api ├ ├──assets //静态资源 ├ ├──images ├ ├──font //存放 公共字体的文件夹 ├ ├──common //存放字体的文件夹 ├ ├──weiruan.ttf ├ ├──changcheng.ttf ├ ├──songti.ttf ├ └── ...... ├ └──index.css ├ └── css ├ ├──components ├ └── views ├ ......

    2、 创建index.css

    在刚刚创建好的font 文件夹中新建index.css 存放字体样式

    /*公共字体的样式 */@font-face {font-family: 'weiruan';src:url('./weiruan.otf') format('otf'), url('./changcheng.woff') format('woff'), /* Modern Browsers */url('./songti.ttf') format('truetype'); /* Safari, Android, iOS */}

    3、全局注册

    在脚手架中找到main.js 文件,引入我们需要全局使用的 index.css 文件

    //main.js import './assets/font/index.css' //全局使用

    4、页面使用

    在需要使用字体的页面,引入全局字体

    div {font-family: weiruan; //使用字体}

    📖 博主致谢

    感谢大家阅读到结尾,本次的文章就分享到这里,总结了【vue全局自定义字体,提高项目字体美化】,希望可以帮到大家,谢谢。

    如果您觉得这篇文章有帮助到您的的话不妨【关注+点赞+收藏+评论+转发 】支持一下哟~~😛您的支持就是我更新的最大动力。👇👇👇👇👇👇


    🛩往期精彩:

    一文图解前端WebSocket 实时通信

    vue 重置刷新页面数据(最快捷 简单的方式,全局定义)

    vue如何通过url携带token,并且打开新页面

    vue拖拽功能,提高你的开发效率

    vue实现隐藏浏览器右侧滚动条功能

    总结

    以上是生活随笔为你收集整理的vue全局自定义字体,提高项目字体美化的全部内容,希望文章能够帮你解决所遇到的问题。

    如果觉得生活随笔网站内容还不错,欢迎将生活随笔推荐给好友。