vue项目引入比较独特的字体的方法

server/2024/9/25 3:45:41/

引入字体的步骤

  • 前言
    • (步骤一)引入的文件
      • `OPPOSans-M.ttf,TencentSans-W3.ttf,TencentSans-W7.ttf,YouSheBiaoTiHei.ttf`
    • (步骤二)font.css
    • (步骤三) 全局引入
    • 在使用的地方的展示
    • 效果展示

前言

公司这边开发一个可视化大屏,UI小姐姐设置了很多比较个性的字体,直接在代码中写入字体名称,字体并没有发生变化,感觉很奇怪,最后上网查资料得知,有些字体需要引入相应的文件才能正确显示

(步骤一)引入的文件

OPPOSans-M.ttf,TencentSans-W3.ttf,TencentSans-W7.ttf,YouSheBiaoTiHei.ttf

在这里插入图片描述

(步骤二)font.css

javascript">//font.css
@font-face {font-family: 'TencentSans';src: url(./TencentSans-W7.ttf);
}@font-face {font-family: 'TencentSans-W3';src: url(./TencentSans-W3.ttf);
}@font-face {font-family: 'YouSheBiaoTiHei';src: url(./YouSheBiaoTiHei.ttf);
}
@font-face {font-family: 'OPPOSans';src: url(./OPPOSans-M.ttf);
}

(步骤三) 全局引入

javascript">//main.js
import './assets/font/font.css'

在使用的地方的展示

javascript"> .header {font-family: YouSheBiaoTiHei;font-size: 40px;}

效果展示

在这里插入图片描述


http://www.ppmy.cn/server/121635.html

相关文章

Snubber电路设计

思路总结: 1.根据测试和推算得出FRA(震荡频率),进而推算出Cp(寄生电容),再根据LRC关系式推算出LP和CP,后续的Csn(吸收电容)和Rsn(吸收电阻)。得出初步的参数然后再PCBA上进行微调就可以实现通用Snub电路的设计。

算法思想之前缀和

前缀和:快速求出数组中某连续区间的和 一.一维前缀和(模板) 1.题目:【模板】前缀和_牛客题霸_牛客网 (nowcoder.com) 给定一个长度为n的数组a1,a2,....ana1​,a2​,....an​.,接下来有q次查询, 每次查询有两个参数l, r,对于每个…

【图灵完备 Turing Complete】游戏经验攻略分享 Part.6 处理器架构2 函数

新的架构来了,本游戏的最后一个攻略分享,最后汇编部分无非是对于操作码的熟练,硬件没有问题,那么也就无关痛痒了。 汇编实现,两数相或和两数相与非一起相与即可。 八位异或器,整就完事了。 有手就行。 利…

解决启动docker desktop报The network name cannot be found的问题

现象 deploying WSL2 distributions ensuring main distro is deployed: checking if main distro is up to date: checking main distro bootstrap version: getting main distro bootstrap version: open \wsl$\docker-desktop\etc\wsl_bootstrap_version: The network name…

Unity 设计模式 之 结构型模式 -【适配器模式】【桥接模式】 【组合模式】

Unity 设计模式 之 结构型模式 -【适配器模式】【桥接模式】 【组合模式】 目录 Unity 设计模式 之 结构型模式 -【适配器模式】【桥接模式】 【组合模式】 一、简单介绍 二、适配器模式 (Adapter Pattern) 1、什么时候使用适配器模式 2、使用适配器模式的好处 3、适配器…

c/c++八股文

c基础 一、指针和引用的区别 定义方式: 指针是通过 * 操作符定义的变量,用于存储另一个变量的地址。例如: int* p &x;引用是通过 & 操作符定义的别名,直接引用另一个变量。例如: int& r x; 内存占用: 指针是一个独立的变量,占用一定的内存空间。引用不是独立的…

Spring IOC容器Bean对象管理-注解方式

目录 1、Bean对象常用注解介绍 2、注解示例说明 1、Bean对象常用注解介绍 Component 通用类组件注解,该类被注解,IOC容器启动时实例化此类对象Controller 注解控制器类Service 注解业务逻辑类Respository 注解和数据库操作的类,如DAO类Reso…

iOS - TestFlight使用

做的项目需要给外部人员演示,但是不方便获取对方设备的UDID,于是采用TestFlight 的方式邀请外部测试人员的方式给对方安装测试App,如果方便获取对方设备的UDID,可以使用蒲公英 1.在Xcode中Archive完成后上传App Store Connect之前…