Vue或uniapp引入自定义字体

一、为什么引入字体

对于大部分APP或网站而言,字体是很重要的一部分。在前端开发中,选用合适的字体往往会极大地提升网站的视觉体验。然而,网页中默认字体的种类和风格有限,且在不同的设备、浏览器上渲染效果不尽相同。因此,很多开发者会选择自定义字体来提升用户体验。

二、如何引入字体并使用

vue引入字体有多种方法,下面将介绍其中两种较为常见的方式。

1. 使用@font-face

下载需要的字体到本地文件夹中

在vue项目下的src/assets文件夹下创建fonts文件夹,放入需要用的字体
在uniapp项目下创建fonts目录,放入需要用的字体

// 在css文件中定义字体
@font-face {font-family: 'CustomFont';src: url('@/fonts/custom-font.ttf');
}body {font-family: 'CustomFont';
}view {font-family: 'CustomFont';
}

这种方式相对简单,定义了一个自定义字体,然后直接在需要应用字体的地方引入即可。需要注意的是,在font-face中除了src属性,还应该添加font-family属性,用来说明自定义字体的名称。通过在css中的font-family设置,即可随时使用。

2. 动态引入字体

也可以在运行时动态引入字体,可以使用以下代码:

const fontFace = new FontFace('CustomFont', 'url(./fonts/custom-font.ttf)');
fontFace.load().then(() => {document.fonts.add(fontFace);
}).catch((error) => {console.error(error);
});

这样可以避免默认情况下浏览器会对所有字体进行预加载,从而降低页面的加载速度。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/102932.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

01 时钟配置初始化,debug

1. 开启debug series,否则只能下载一次,再次下载要配置boot 2.f0外部时钟配置 h750 配置 实测可用

FPGA面试题(1)

一.FPGA内部结构 可编程I/OPLL锁相环(其作用为:分频,倍频,相位调节、占空比)逻辑阵列块LAB(每个LAB由16个逻辑器件LE组成,每个LE包括一个查找表LUT和一个RAM构成。Cyclone IV EP4CE6F17C8中包含…

【Spring AOP】统一异常处理

统一异常处理 统⼀异常处理使⽤的是 ControllerAdvice ExceptionHandler 来实现的, 类上面加上 ControllerAdvice 注解表示控制器通知类方法上面加上 ExceptionHandler 表示异常处理器,并添加异常返回的业务代码 两个结合表示当出现异常的时候执⾏某个…

Android终极大招之全面取代drawble文件实现View圆角背景样式的新方案

简介 最近一直忙于音视频SDK的开发,遇到很多问题,简单来说,就是怎么让别人接入SDK时越简单越好。相信大多数Android开发都会遇到一个场景,给TextView或Button添加背景颜色,修改圆角,描边等需求。一看到这样…

React 组件传 children 的各种方案

自定义组件的时候往往需要传 children,由于写法比较多样,我就总结了一下。 方案列表 1. 类组件1.1 类组件,不使用解构1.2 类组件,使用解构 2. 函数组件2.1 函数组件,不使用解构2.2 函数组件,外部解构2.3 函…

docker 登录本地仓库harbor问题

1、报错如下: 添加目标harbor 仓库的hosts vim /etc/hosts 2、报错如下: 添加修改/etc/docker/daemon.json文件中的 insecure-registries vim /etc/docker/daemon.json 然后 systemctl daemon-reload systemctl restart docker再次登录

HQChart实战教程66-动态调整HQChart布局大小

HQChart实战教程66-动态调整HQChart布局大小 需求小程序h5AppHQChart插件源码地址 需求 在不销毁hqchart实例的情况下,动态调整K线图或分时图的大小, 如下图,把图1的K线图大小调整为图2的大小 图1 图2 小程序 调整画布大小,并…

echrat 的tooltip轮播播放高亮

在src目录下建立utils文件建立tooltip-auto-show-vue.js export function autoHover(myChart, option, num, time) {var defaultData {// 设置默认值time: 2000,num: 100}if (!time) {time defaultData.time}if (!num) {num defaultData.num}var count 0var timeTicket n…

(c语言进阶)指针的进阶

一.字符指针 1.一般应用 (1)%c的应用 (2)%s的应用 字符指针没有权限通过解引用去改变指针指向的值 2.笔试题 题目:判断输出结果 int main() { const char* p1 "abcdef"; const char* p2 "…

前端开发工具vscode

一、下载安装 https://code.visualstudio.com/ 二、安装插件 三、使用 ①、创建一个空目录 ②、利用vscode工具打开该目录 ③、将该目录设置为工作区 在工作区中添加文件,还可以进行浏览器访问(提前安装了Live Server插件) 为工具…

Dubbo-SPI机制

1、Java的SPI机制 SPI的全称是Service Provider Interface,是JDK内置的动态加载实现扩展点的机制,通过SPI可以动态获取接口的实现类,属于一种设计理念。 系统设计的各个抽象,往往有很多不同的实现方案,在面向的对象的…

黄金票据与白银票据

文章目录 黄金票据与白银票据1. 背景2. 具体实现2.1 Kerberos协议认证流程 3. 黄金票据3.1 条件3.2 适用场景3.3 利用方式 4. 白银票据4.1 条件4.2 适用场景4.3 利用方式 5. 金票和银票的区别5.1 获取的权限不同5.2 认证流程不同5.3 加密方式不同 6. 经典面试题6.1 什么是黄金票…

018-第三代软件开发-整体介绍

第三代软件开发-整体介绍 文章目录 第三代软件开发-整体介绍项目介绍整体介绍Qt 属性系统QML 最新软件技术框架 关键字: Qt、 Qml、 属性、 Qml 软件架构 项目介绍 欢迎来到我们的 QML & C 项目!这个项目结合了 QML(Qt Meta-Object …

97 # session

koa 里的 cookie 用法 koa 里内置了设置 cookie 的方法 npm init -y npm i koa koa/router用法: const Koa require("koa"); const Router require("koa/router"); const crypto require("crypto");const app new Koa(); let …

【ESP32 + Edge Impulse平台】模拟多传感器数据融合实验测试

本文章主要记录利用 【ESP32 + Edge Impulse平台】完成数据集的采集、训练、测试、模型部署和运行,实现多传感器数据的融合 目录 1. 实验描述1.1【场景1固件】1.2【场景2固件】2.数据集采集2.1 数据集12.1 数据集23.数据集训练3.1 生成数据特征3.2 选用分类器训练数据集3.3 模…

【MySQL】内置函数——数学函数+其他函数

文章目录 一. 数字函数二. 其他函数 一. 数字函数 函数名称描述abs()绝对值函数bin()十进制转换二进制hex()转换成十六进制conv(number,from_base,to_base)将number从from_base转换成to_base进制ceiling()向上取整floor()向下取整format(number,decimal_places)格式化&#xf…

3D 生成重建004-DreamFusion and SJC :TEXT-TO-3D USING 2D DIFFUSION

3D 生成重建004-DreamFusion and SJC :TEXT-TO-3D USING 2D DIFFUSION 文章目录 0 论文工作1 论文方法1.1论文方法1.2 CFG1.3影响1.4 SJC 2 效果 0 论文工作 对于生成任务,我们是需要有一个数据样本,让模型去学习数据分布 p ( x ) p(x) p(x…

易点云CFO向征:CFO不能只讲故事,价值创造才是核心

作者 | 曾响铃 文 | 响铃说 在今年6月初,也是易点云上市6天后,《巴伦周刊》正式启动评价“2023港美上市中国企业CFO精英100”的活动。 时间来到9月,评价揭秘,易点云CFO向征成功入选,被评为“年度最具成长潜力CFO”…

windows创建服务:更新服务信息乱码问题(ChangeServiceConfig)

因为小项目需要创建windows服务,安装微软官方示例一切都挺顺利,代码运行后发现配置的信息在系统里显示乱码。打开注册表发现的确是乱码。这就排除软件读取得问题,而是调用ChangeServiceConfig系统函数写入时就发生了乱码。让我在网上查找了一…