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

uniapp 添加字体ttf

效果图如下

一、逻辑概述

在uniapp中使用字体,一共分成两种情况,一种是普通vue页面,一种是nvue页面引入字体。。

1.vue页面引入字体需要如下步骤

1. 先选择下载一种字体:字体格式一般为 ttf后缀名

黄凯桦律师手写体免费下载和在线预览 - 站长字体
 

2.通过css的@font-face属性,加载本地的字体
@font-face {
    font-family: "zhuqueSong";
    src: url('zhu_que_song.ttf');
}
3.在整个uniapp中导入加载本地字体的css文件
4. 在代码中使用

具体如下

(1)在static目录下,新建一个font文件夹,之后里面放入 font.css 和 zhu_que_song.ttf

(2)font.css文件,就是为了加载本地字体的,具体写法如下

@font-face {font-family: "zhuqueSong";src: url('zhu_que_song.ttf');
}

(3)在app.vue这个入口文件,导入font.css文件,使其在全局生效

<style lang="scss">@import "@/static/font/font.css";
</style>

(4)在某个页面使用字体写法,就通过css属性font-family,

<template><div class="box-text-ziti">怎么做都后悔的话,那就选择让自己开心的。(字体)</div>
</template><style scoped>.box-text-ziti{font-family: "zhuqueSong";}
</style>

注意:"zhuqueSong" 这个名字是@font-face定义的

2. nvue页面引入字体

根据官网描述uni-app官网

目前我测试成功的只有线上字体的使用

<template><!-- 要在是text组件在view组件不生效 --><text class="konw-box">怎么做都后悔的话,那就选择让自己开心的。</text>
</template><script setup>
//在nvue页面声明字体
const domModule = uni.requireNativePlugin('dom')
domModule.addRule('fontFace', {'fontFamily': "zhuqueSong",'src': "url('https://xxxxx/zhu_que_song.ttf')"});
</script><style scoped lang="scss">.konw-box{// 字体名称不加引号font-family: zhuqueSong;}
</style>

相关文章:

uniapp 添加字体ttf

效果图如下 一、逻辑概述 在uniapp中使用字体&#xff0c;一共分成两种情况&#xff0c;一种是普通vue页面&#xff0c;一种是nvue页面引入字体。。 1.vue页面引入字体需要如下步骤 1. 先选择下载一种字体&#xff1a;字体格式一般为 ttf后缀名 黄凯桦律师手写体免费下载和在线…...

Linux入门攻坚——24、BIND编译安装、Telnet和OpenSSH

BIND编译安装 对于没有rpm包&#xff0c;需要源代码编译安装。 1、下载源代码&#xff1a;bind-9.12.2-P1.tar.gz&#xff0c;解压&#xff1a;tar -xf bind-9.12.2-P1.tar.gz 2、完善环境&#xff1a; 1&#xff09;增加用户组named&#xff1a;groupadd -g 53 named 2&…...

1.5.3 基于Java配置方式使用Spring MVC

本实战教程主要介绍了如何使用Java配置方式来使用Spring MVC框架。相较于XML配置方式&#xff0c;Java配置方式提供了一种更为简洁和灵活的配置方法。 项目创建与配置 创建一个Jakarta EE项目&#xff0c;并设置项目名称和位置。选择Jakarta EE 10版本&#xff0c;不添加依赖&a…...

Artifactory清理二进制文件丢失的制品

一、摘要 当制品上传到 Artifactory 时&#xff0c;Artifactory 会在数据库中记录制品的相关元数据信息&#xff0c;包括文件路径、大小、校验和&#xff08;如 MD5、SHA1&#xff09;、上传时间、索引、依赖等。实际的制品二进制文件会存储在指定的存储后端&#xff0c;具体的…...

C#中的数组探索

在C#编程语言中&#xff0c;数组是一种基本的数据结构&#xff0c;用于存储固定大小的同类型元素序列。本文将深入探讨C#数组的各个方面&#xff0c;包括定义、赋值、范围操作、切片、多维数组&#xff08;矩形与锯齿形&#xff09;、简化初始化表达式以及边界检查。 数组定义…...

身份认证与口令攻击

身份认证与口令攻击 身份认证身份认证的五种方式口令认证静态口令动态口令(一次性口令)动态口令分类 密码学认证一次性口令认证S/KEY协议改进的S/KEY协议 其于共享密钥的认证 口令行为规律和口令猜测口令规律口令猜测 口令破解操作系统口令破解Windows密码存储机制Windows密码破…...

卷积网络迁移学习:实现思想与TensorFlow实践

摘要&#xff1a;迁移学习是一种利用已有知识来改善新任务学习性能的方法。 在深度学习中&#xff0c;迁移学习通过迁移卷积网络&#xff08;CNN&#xff09;的预训练权重&#xff0c;实现了在新领域或任务上的高效学习。 下面我将详细介绍迁移学习的概念、实现思想&#xff0c…...

Ansible04-Ansible Vars变量详解

目录 写在前面6 Ansible Vars 变量6.1 playbook中的变量6.1.1 playbook中定义变量的格式6.1.2 举例6.1.3 小tip 6.2 共有变量6.2.1 变量文件6.2.1.1 变量文件编写6.2.1.2 playbook编写6.2.1.3 运行测试 6.2.2 根据主机组使用变量6.2.2.1 groups_vars编写6.2.2.2 playbook编写6.…...

Flutter 中的 SliverCrossAxisGroup 小部件:全面指南

Flutter 中的 SliverCrossAxisGroup 小部件&#xff1a;全面指南 Flutter 是一个功能丰富的 UI 开发框架&#xff0c;它允许开发者使用 Dart 语言来构建高性能、美观的移动、Web 和桌面应用。在 Flutter 的丰富组件库中&#xff0c;SliverCrossAxisGroup 是一个较少被使用的组…...

开源还是闭源这是一个问题

天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物。 每个人都有惰性&#xff0c;但不断学习是好好生活的根本&#xff0c;共勉&#xff01; 文章均为学习整理笔记&#xff0c;分享记录为主&#xff0c;如有错误请指正&#xff0c;共同学习进步。…...

数据结构与算法笔记:基础篇 - 栈:如何实现浏览器的前进和后退功能?

概述 浏览器的前进、后退功能&#xff0c;你肯定很熟悉吧&#xff1f; 当依次访问完一串页面 a-b-c 之后&#xff0c;点击浏览器的后退按钮&#xff0c;就可以查看之前浏览过的页面 b 和 a。当后退到页面 a&#xff0c;点击前进按钮&#xff0c;就可以重新查看页面 b 和 c。但…...

【AIGC】大型语言模型在人工智能规划领域模型生成中的探索

大型语言模型在人工智能规划领域模型生成中的新应用 一、引言二、LLM在规划领域模型生成中的潜力三、实证分析&#xff1a;LLM在规划领域模型生成中的表现四、代码实例&#xff1a;LLM在规划领域模型生成中的应用五、结论与展望 一、引言 随着人工智能技术的迅猛发展&#xff0…...

从零开始学习Slam-旋转矩阵旋转向量四元组(二)

本文参考&#xff1a;计算机视觉life 仅作笔记用 书接上回&#xff0c;上回不清不楚的介绍了旋转矩阵&旋转向量和四元组 现在回顾一下重点&#xff1a; 本着绕谁谁不变的变则 假设绕z轴旋转θ&#xff0c;旋转矩阵为&#xff1a; 再回顾一下旋转向量的表示以及这个基本记不…...

基于Spring Security添加流控

基于Spring Security添加流控的过程&#xff1a; 步骤1: 添加依赖 确保项目中包含了Spring Security和Sentinel-Core的相关依赖。在Maven项目中&#xff0c;可以在pom.xml中添加如下依赖&#xff1a; <!-- Spring Security --> <dependency><groupId>org.…...

Python | Leetcode Python题解之第119题杨辉三角II

题目&#xff1a; 题解&#xff1a; class Solution:def getRow(self, rowIndex: int) -> List[int]:row [1, 1]if rowIndex < 1:return row[:rowIndex 1]elif rowIndex > 2:for i in range(rowIndex - 1):row [row[j] row[j 1] for j in range(i 1)]row.inser…...

物联网应用系统与网关

一. 传感器底板相关设计 1. 传感器设计 立创EDA传感器设计举例。 2. 传感器实物图 3. 传感器测试举例 测试激光测距传感器 二. 网关相关设计 1. LORA&#xff0c;NBIOT等设计 2. LORA&#xff0c;NBIOT等实物图 3. ZigBee测试 ZigBee测试 4. NBIoT测试 NBIoT自制模块的测试…...

系统稳定性概览

系统稳定性 系统稳定性&#xff0c;包括&#xff1a;监控、 告警、性能优化、慢sql、耗时接口等。 系统的稳定性的治理&#xff0c;可以围绕这几方面展开。 监控 Prometheus 监控并收集数据。监控 qps&#xff0c;tps&#xff0c; rt , cpu使用率&#xff0c;cpu load&#…...

Redis-Cluster模式基操篇

一、场景 1、搞一套6个主节点的Cluster集群 2、模拟数据正常读写 3、模拟单点故障 4、在不停服务的情况下将集群架构改为3主3从 二、环境规划 6台独立的服务器&#xff0c;端口18001~18006 192.169.14.121 192.169.14.122 192.169.14.123 192.169.14.124 192.169.14.125 192…...

Golang | Leetcode Golang题解之第113题路径总和II

题目&#xff1a; 题解&#xff1a; type pair struct {node *TreeNodeleft int }func pathSum(root *TreeNode, targetSum int) (ans [][]int) {if root nil {return}parent : map[*TreeNode]*TreeNode{}getPath : func(node *TreeNode) (path []int) {for ; node ! nil; no…...

云计算与 openstack

文章目录 一、 虚拟化二、云计算2.1 IT系统架构的发展2.2 云计算2.3 云计算的服务类型 三、Openstack3.1 OpenStack核心组件 一、 虚拟化 虚拟化使得在一台物理的服务器上可以跑多台虚拟机&#xff0c;虚拟机共享物理机的 CPU、内存、IO 硬件资源&#xff0c;但逻辑上虚拟机之…...

谷歌浏览器插件

项目中有时候会用到插件 sync-cookie-extension1.0.0&#xff1a;开发环境同步测试 cookie 至 localhost&#xff0c;便于本地请求服务携带 cookie 参考地址&#xff1a;https://juejin.cn/post/7139354571712757767 里面有源码下载下来&#xff0c;加在到扩展即可使用FeHelp…...

基于FPGA的PID算法学习———实现PID比例控制算法

基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容&#xff1a;参考网站&#xff1a; PID算法控制 PID即&#xff1a;Proportional&#xff08;比例&#xff09;、Integral&#xff08;积分&…...

React hook之useRef

React useRef 详解 useRef 是 React 提供的一个 Hook&#xff0c;用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途&#xff0c;下面我将全面详细地介绍它的特性和用法。 基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...

Mac下Android Studio扫描根目录卡死问题记录

环境信息 操作系统: macOS 15.5 (Apple M2芯片)Android Studio版本: Meerkat Feature Drop | 2024.3.2 Patch 1 (Build #AI-243.26053.27.2432.13536105, 2025年5月22日构建) 问题现象 在项目开发过程中&#xff0c;提示一个依赖外部头文件的cpp源文件需要同步&#xff0c;点…...

OPENCV形态学基础之二腐蚀

一.腐蚀的原理 (图1) 数学表达式&#xff1a;dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一&#xff0c;腐蚀跟膨胀属于反向操作&#xff0c;膨胀是把图像图像变大&#xff0c;而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。 腐蚀…...

HarmonyOS运动开发:如何用mpchart绘制运动配速图表

##鸿蒙核心技术##运动开发##Sensor Service Kit&#xff08;传感器服务&#xff09;# 前言 在运动类应用中&#xff0c;运动数据的可视化是提升用户体验的重要环节。通过直观的图表展示运动过程中的关键数据&#xff0c;如配速、距离、卡路里消耗等&#xff0c;用户可以更清晰…...

GitFlow 工作模式(详解)

今天再学项目的过程中遇到使用gitflow模式管理代码&#xff0c;因此进行学习并且发布关于gitflow的一些思考 Git与GitFlow模式 我们在写代码的时候通常会进行网上保存&#xff0c;无论是github还是gittee&#xff0c;都是一种基于git去保存代码的形式&#xff0c;这样保存代码…...

MySQL 部分重点知识篇

一、数据库对象 1. 主键 定义 &#xff1a;主键是用于唯一标识表中每一行记录的字段或字段组合。它具有唯一性和非空性特点。 作用 &#xff1a;确保数据的完整性&#xff0c;便于数据的查询和管理。 示例 &#xff1a;在学生信息表中&#xff0c;学号可以作为主键&#xff…...

android13 app的触摸问题定位分析流程

一、知识点 一般来说,触摸问题都是app层面出问题,我们可以在ViewRootImpl.java添加log的方式定位;如果是touchableRegion的计算问题,就会相对比较麻烦了,需要通过adb shell dumpsys input > input.log指令,且通过打印堆栈的方式,逐步定位问题,并找到修改方案。 问题…...

「全栈技术解析」推客小程序系统开发:从架构设计到裂变增长的完整解决方案

在移动互联网营销竞争白热化的当下&#xff0c;推客小程序系统凭借其裂变传播、精准营销等特性&#xff0c;成为企业抢占市场的利器。本文将深度解析推客小程序系统开发的核心技术与实现路径&#xff0c;助力开发者打造具有市场竞争力的营销工具。​ 一、系统核心功能架构&…...