vue项目如何设置全局字体样式font-family
更新时间：2023年11月16日 09:26:57 作者：前端攻城狮路飞
这篇文章主要介绍了vue项目如何设置全局字体样式font-family问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue项目设置全局字体样式font-family
直接在app.vue文件中加上一下代码即可，这是我收集的比较全的字体样式，从第一个向后找，系统有就默认显示第一个，
依次往后找：
<style lang="scss">
body {
font-family:”Microsoft YaHei”,Arial,Helvetica,sans-serif,”宋体”;
}
</style>
你学废了吗！
vue中替换全局字体
产品说项目要拿去展会展示，但现在项目字体是微软雅黑，不支持商用，需要全局替换思源字体。
下载字体
推荐一个网站，字体天下，好用
下载好的文件如下：
引入字体
1、在项目资源目录下新建一个fonts文件夹，引入下载好的字体文件
2、编写css文件（我的是font.less）
@font-face{
font-family: HanSans;
src: url('../fonts/SourceHanSansCN-VF-2.otf')
}
3、main.js引入思源字体
import '@/assets/css/font.less' // 引入思源字体
使用
1、在App.vue中
2、搜索font-family，看有没有被替换掉的字体，改过来
完事！
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了实现vuex原理的示例，帮助大家更好的理解和学习vue，感兴趣的朋友可以了解下2020-10-10
基于vue-cli3多页面开发apicloud应用的教程详解
这篇文章主要介绍了基于vue-cli3多页面开发apicloud应用，本文采用vue-cli+APIcloud的方式写解决以上痛点，开发灵活，并且打包之后体积更小速度更快,需要的朋友可以参考下2019-06-06
这篇文章主要为大家详细介绍了vue选项卡切换登录方式小案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-09-09
这篇文章主要为大家详细介绍了Vue实现星空效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
Vue框架的优秀设计和强大的生态系统成为了越来越多开发者选择Vue的原因,在实际项目过程中一个高效的开发环境能够大大提高开发效率,这篇文章主要给大家介绍了关于vscode搭建vue环境的相关资料,需要的朋友可以参考下2023-10-10
这篇文章主要介绍了vue 接口请求地址前缀本地开发和线上开发设置方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要介绍了vue源码nextTick使用及原理解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-08-08
Tabs 组件提供了选项卡功能,默认选中第一个标签页,下面这篇文章主要给大家介绍了关于vue elementUi中的tabs标签页使用的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下2023-03-03
这篇文章讲给大家详细介绍一下Vue如何实现登录后添加动态路由并跳转，文章通过代码示例介绍的非常详细，对我们的学习或工作有一定的的帮助,需要的朋友可以参考下2023-07-07
VUE table表格动态添加一列数据,新增的这些数据不可以编辑（v-model绑定的数据不能实时更新）
这篇文章主要介绍了VUE table表格动态添加一列数据,新增的这些数据不可以编辑（v-model绑定的数据不能实时更新）,本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下2020-04-04
最新评论