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,看有没有被替换掉的字体,改过来

完事!

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue初始化项目时报错:Error:Cannot find module vue-template-compiler解决

    vue初始化项目时报错:Error:Cannot find module vue-temp

    这篇文章主要介绍了vue初始化项目时报错:Error:Cannot find module vue-template-compiler问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • 详解vue.js的devtools安装

    详解vue.js的devtools安装

    本篇文章主要介绍了详解vue.js的devtools安装 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05
  • Vue项目中常用的实用技巧汇总

    Vue项目中常用的实用技巧汇总

    如果说是JQuery是手工作坊,那么Vue.js就像是一座工厂,虽然Vue.js做的任何事情JQuery都可以做,但无论是代码量还是流程规范性都是前者较优,这篇文章主要给大家汇总介绍了关于Vue项目中常用的实用技巧,需要的朋友可以参考下
    2021-07-07
  • vue构建单页面应用实战

    vue构建单页面应用实战

    本篇文章主要介绍了vue构建单页面应用实战,使用 SPA,没有页面切换,就没有白屏阻塞,可以大大提高 H5 的性能,达到接近原生的流畅体验。
    2017-04-04
  • 详解Vue中CSS样式穿透问题

    详解Vue中CSS样式穿透问题

    这篇文章主要介绍了VUE中CSS样式穿透问题,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-09-09
  • Vue将页面导出为图片或者PDF

    Vue将页面导出为图片或者PDF

    这篇文章主要为大家详细介绍了Vue导出页面为PDF格式,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-06-06
  • 如何一步步基于element-ui封装查询组件

    如何一步步基于element-ui封装查询组件

    这篇文章主要给大家介绍了关于如何一步步基于element-ui封装查询组件的相关资料,本文通过示例代码介绍的非常详细,对大家学习或者使用vue.js具有一定的参考学习价值,需要的朋友可以参考下
    2021-10-10
  • vue-router中的钩子函数和执行顺序说明

    vue-router中的钩子函数和执行顺序说明

    这篇文章主要介绍了vue-router中的钩子函数和执行顺序说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07
  • element的el-date-picker组件实现只显示年月日时分效果(不显示秒)

    element的el-date-picker组件实现只显示年月日时分效果(不显示秒)

    最近遇到这样的需求使用element的el-date-picker组件,只显示时分,不显示秒,下面小编给大家分享element的el-date-picker组件实现只显示年月日时分效果,感兴趣的朋友一起看看吧
    2024-08-08
  • 解决vue-cli-service不是内部或外部命令也不是可运行的程序或批处理文件的报错问题

    解决vue-cli-service不是内部或外部命令也不是可运行的程序或批处理文件的报错问题

    这篇文章主要介绍了解决vue-cli-service不是内部或外部命令也不是可运行的程序或批处理文件的报错问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-03-03

最新评论