当前位置: 首页 > article >正文

vue项目如何设置字体样式font-family,font-family在项目中不生效

vue项目如何设置全局字体样式font-family

一: 1.下载字体
推荐网站 字体天下 亲测好用
在这里插入图片描述
2.下载好的文件如下:

在这里插入图片描述

二. vue 项目中引入字体
1.在项目资源目录下新建一个fonts文件夹,引入下载好的字体文件
在这里插入图片描述

2、编写css文件(我的是font.less)

在这里插入图片描述

@font-face {
    font-family: 'YouSheBiaoTiHei';
    src: url('../fonts/YouSheBiaoTiHei-2.ttf');
}

3、main.js引入思源字体在这里插入代码片
在这里插入图片描述

import '@/assets/css/font.less'

三.使用

1.在需要的页面中设置 font-family字体
在这里插入图片描述


http://www.kler.cn/a/420779.html

相关文章:

  • 我们来学mysql -- 事务并发之脏写(原理篇)
  • 探索仓颉编程语言:官网上线,在线体验与版本下载全面启航
  • [Effective C++]条款24 类型转换与non-member函数
  • 基于大数据python 电商数据分析及推荐可视化系统(源码+LW+部署讲解+数据库+ppt)
  • 人工智能-卷积神经网络(学习向)
  • AD软件如何快速切换三维视图,由2D切换至3D,以及如何恢复
  • linux perf安装问题解决
  • Python线程使用
  • linux arm下获取屏幕事件(rk3588)
  • 大模型开发和微调工具Llama-Factory-->训练方法(SFT, RLHF, DPO, KTO)
  • Android 编译和使用libheif
  • playwright 学习复仇记-2 Selector选择器定位元素
  • vmware虚拟机移植
  • 多线程 03 实现方式
  • 三维开发中blender建模后如何完美兼容到threejs
  • SAP HANA 上进行 ABAP 开发:简介
  • 设计模式 更新ing
  • 简单快速的上手python
  • node.js基础学习-zlib模块-压缩解压(八)
  • 护航开源大赛,赋能数字未来
  • Milvus python库 pymilvus 常用操作详解之Collection(上)
  • 算力100问☞第32问:密集计算的关键技术有哪些?
  • Pytest --capture 参数详解:如何控制测试执行过程中的输出行为
  • 【ONE·基础算法 || 动态规划(三)】
  • 基于Java Springboot成人教育APP且微信小程序
  • Web实时通信@microsoft/signalr