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

[保姆级教程]uniapp设置字体引入字体格式

在这里插入图片描述

文章目录


在 UniApp 中设置和引入自定义字体(如 .ttf、.woff、.woff2 等格式)通常涉及几个步骤。

  1. 准备字体文件
    首先,你需要有字体文件。这些文件通常以 .ttf.woff.woff2 格式提供。确保有权使用这些字体,并遵守任何相关的许可协议。

  2. 将字体文件放入项目中
    将字体文件放入你的 UniApp 项目的 staticassets 文件夹中。通常推荐放在 static 文件夹中,因为 static 文件夹下的文件不会被 Webpack 处理,而是直接复制到最终的打包目录中。
    在这里插入图片描述

  3. 在 CSS 中引用字体
    在 CSS 文件中(可能是 App.vue<style> 部分或单独的 CSS 文件),使用 @font-face 规则来定义你的字体。例如:

   /* 假设字体文件名为 MyFont.woff,并放在 static/fonts 文件夹下 */@font-face {font-family: 'MyFont'; /* 你可以给字体起一个别名 */src: url('~@/static/fonts/MyFont.woff') format('woff'), /* 注意路径可能需要根据你的项目结构进行调整 */url('~@/static/fonts/MyFont.woff2') format('woff2'), /* 如果有 woff2 版本也可以加上 */url('~@/static/fonts/MyFont.ttf') format('truetype'); /* 还可以加上 ttf 格式作为备选 */font-weight: normal;font-style: normal;}

注意:~@/ 是 Vue CLI 项目中常用的别名,它指向 src 目录。但在 UniApp 中,可能需要直接使用相对路径或绝对路径。确保路径指向字体文件。

  1. 在样式中使用字体
    一旦定义了字体,就可以在 CSS 中使用它了。只需将 font-family 属性设置为定义的字体别名即可:
   .my-element {font-family: 'MyFont', sans-serif; /* 使用你定义的字体,并指定一个备选字体 */}
  1. 注意事项

    • 确保字体文件与你的应用兼容,并测试在不同的设备和浏览器上的表现。
    • 如果你的项目使用了构建工具(如 Webpack),可能需要配置以正确处理字体文件。但在 UniApp 中,这通常不是必需的,因为 UniApp 有自己的构建和打包流程。
    • 如果你在 H5 平台上使用自定义字体,并希望优化加载性能,可以考虑使用字体加载策略(如字体子集化或按需加载)。但请注意,这些策略可能不适用于所有平台或构建目标。
  2. 跨平台兼容性

    • UniApp 支持多个平台,包括 iOS、Android、H5、小程序等。虽然大多数现代浏览器和平台都支持 Web 字体,但最好还是在你的目标平台上测试自定义字体的表现。
    • 特别是对于小程序平台,由于平台的限制和差异,可能需要额外的步骤或配置来使用自定义字体。查阅 UniApp 的官方文档和相应平台的开发文档以获取更多信息。

您好,我是肥晨。
欢迎关注我获取前端学习资源,日常分享技术变革,生存法则;行业内幕,洞察先机。

相关文章:

[保姆级教程]uniapp设置字体引入字体格式

文章目录 在 UniApp 中设置和引入自定义字体&#xff08;如 .ttf、.woff、.woff2 等格式&#xff09;通常涉及几个步骤。 准备字体文件&#xff1a; 首先&#xff0c;你需要有字体文件。这些文件通常以 .ttf、.woff 或 .woff2 格式提供。确保有权使用这些字体&#xff0c;并遵守…...

【Webpack】前端工程化之Webpack与模块化开发

目 录 前言模块化开发Stage1 - 文件划分方式Stage2 - 命名空间方式Stage3 - IIFE&#xff08;立即调用函数表达式&#xff09;Stage 4 - IIFE 依赖参数模块化的标准规范 使用Webpack实现模块化打包安装WebpackWebpack基本配置Webpack构建流程Webpack热更新Webpack打包优化 前言…...

【Android】记录在自己的AMD处理器无法使用Android studio 虚拟机处理过程

文章目录 问题&#xff1a;无法在AMD平台打开Android studio 虚拟机&#xff0c;已解决平台&#xff1a;AMD 5700g系统&#xff1a;win10专业版1、在 amd平台上使用安卓虚拟机需要安装硬件加速器2、关闭win10上的系统服务 问题&#xff1a;无法在AMD平台打开Android studio 虚拟…...

LearnOpenGL - Android OpenGL ES 3.0 使用 FBO 进行离屏渲染

系列文章目录 LearnOpenGL 笔记 - 入门 01 OpenGLLearnOpenGL 笔记 - 入门 02 创建窗口LearnOpenGL 笔记 - 入门 03 你好&#xff0c;窗口LearnOpenGL 笔记 - 入门 04 你好&#xff0c;三角形OpenGL - 如何理解 VAO 与 VBO 之间的关系LearnOpenGL - Android OpenGL ES 3.0 绘制…...

人工智能虚拟仿真系统,解决算法难、编程难、应用场景难三大难题

近年来&#xff0c;人工智能技术迅猛发展&#xff0c;广泛渗透至各行业&#xff0c;市场份额持续扩大&#xff0c;预示着智能化转型的广阔前景。该行业本质上属于知识高度密集型&#xff0c;近年来的迅猛发展进一步加剧了对专业人才的迫切需求。 然而&#xff0c;我国目前在人工…...

CTE(公共表表达式)和视图在查询时的性能影响

在SQL查询优化和数据库设计中&#xff0c;CTE&#xff08;公共表表达式&#xff09;和视图都是常用的工具。尽管它们在功能和使用场景上有很多相似之处&#xff0c;但在查询性能方面可能存在显著差异。本文将探讨CTE和视图在查询时的性能影响&#xff0c;帮助您在实际项目中做出…...

新能源行业必会基础知识-----电力市场概论笔记-----绪论

新能源行业知识体系-------主目录-----持续更新(进不去说明我没写完)&#xff1a;https://blog.csdn.net/grd_java/article/details/139946830 目录 1. 电力市场的定义2. 对传统电力系统理论的挑战 1. 电力市场的定义 1. 我国电力市场的进程 我国新一轮电力体制改革的5大亮点&…...

003 SpringBoot操作ElasticSearch7.x

文章目录 5.SpringBoot集成ElasticSearch7.x1.添加依赖2.yml配置3.创建文档对象4.继承ElasticsearchRepository5.注入ElasticsearchRestTemplate 6.SpringBoot操作ElasticSearch1.ElasticsearchRestTemplate索引操作2.ElasticsearchRepository文档操作3.ElasticsearchRestTempl…...

npm install报错Maximum call stack size exceeded

npm 报错 方案&#xff1a; npm cache clean --force npm install...

第1章 基础知识

第1章 基础知识 1.1 机器语言 机器语言就是机器指令的集合&#xff0c;机器指令展开来讲就是一台机器可以正确执行的命令 1.2 汇编语言的产生 汇编语言的主题是汇编指令。汇编指令和机器指令的差别在于指令的表示方法上&#xff0c;汇编指令是机器指令便于记忆的书写格式。…...

python脚本 限制 外部访问 linux服务器端口

注意&#xff1a;该脚本会清空linux防火墙的filter表的规则和用户自定义链路 脚本的效果是将端口限制为仅服务器内部访问 可以提供ip地址白名单 具体脚本&#xff1a; #!/usr/bin/python3 import argparse, subprocess, sys, redef popen(cmd):global resulttry:result su…...

Redis-哨兵模式-主机宕机-推选新主机的过程

文章目录 1、为哨兵模式准备配置文件2、启动哨兵3、主机6379宕机3.4、查看sentinel控制台日志3.5、查看6380主从信息 4、复活63794.1、再次查看sentinel控制台日志 1、为哨兵模式准备配置文件 [rootlocalhost redis]# ll 总用量 244 drwxr-xr-x. 2 root root 150 12月 6 2…...

游戏工厂:AI(AIGC/ChatGPT)与流程式游戏开发

游戏工厂&#xff1a;AI&#xff08;AIGC/ChatGPT&#xff09;与流程式游戏开发 码客 卢益贵 ygluu 关键词&#xff1a;AI&#xff08;AIGC、ChatGPT、文心一言&#xff09;、流程式管理、好莱坞电影流程、电影工厂、游戏工厂、游戏开发流程、游戏架构、模块化开发 一、前言…...

每日一练 - OSPF 组播地址

01 真题题目 判断以下陈述是否正确&#xff1a; 224.0.0.6 是 ALL DRouters 监听地址 224.0.0.5 是 ALL SPFRouters 监听地址 A.正确 B.错误 02 真题答案 A 03 答案解析 在OSPF (Open Shortest Path First) 路由协议中&#xff0c;为了实现高效的信息交换和发现邻居&#x…...

AMHS工程师的培养

一、岗位职责主要包括: 1. 负责生产现场设备运行维护及异常处理,确保设备安全操作与保养。 2. 制定并实施AMHS计划和措施,对过程问题进行追踪解决。 3. 监控生产过程中的不良品率,确保生产过程的稳定性。 4. 建立AMHS标准作业程序文件,并定期更新和维护。 5. 负责AMHS…...

如何在前端项目中制定代码注释规范

本文是前端代码规范系列文章&#xff0c;将涵盖前端领域各方面规范整理&#xff0c;其他完整文章可前往主页查阅~ 开始之前&#xff0c;介绍一下​最近很火的开源技术&#xff0c;低代码。 作为一种软件开发技术逐渐进入了人们的视角里&#xff0c;它利用自身独特的优势占领市…...

一位苹果手机硬件工程师繁忙的一天

早晨&#xff1a;迎接新的一天 7:00 AM - 起床 早晨七点准时起床。洗漱、吃早餐后&#xff0c;查看手机上的邮件和消息&#xff0c;以便提前了解今天的工作安排和优先事项。 7:30 AM - 前往公司 开车前往位于加州库比蒂诺的苹果总部。在车上习惯性地听一些与电子工程相关的播…...

Python | 使用均值编码(MeanEncoding)处理分类特征

在特征工程中&#xff0c;将分类特征转换为数字特征的任务称为编码。 有多种方法来处理分类特征&#xff0c;如OneHotEncoding和LabelEncoding&#xff0c;FrequencyEncoding或通过其计数替换分类特征。同样&#xff0c;我们可以使用均值编码(MeanEncoding)。 均值编码 均值…...

面试-java异常体系

1.java异常体系 error类是指与jvm相关的问题。如系统崩溃&#xff0c;虚拟机错误&#xff0c;内存空间不足。 非runtime异常不处理&#xff0c;程序就没有办法执行。 一旦遇到异常抛出&#xff0c;后面的异常就不会进行。 (1)常见的error以及exception 2.java异常要点分析…...

Clickhouse 的性能优化实践总结

文章目录 前言性能优化的原则数据结构优化内存优化磁盘优化网络优化CPU优化查询优化数据迁移优化 前言 ClickHouse是一个性能很强的OLAP数据库&#xff0c;性能强是建立在专业运维之上的&#xff0c;需要专业运维人员依据不同的业务需求对ClickHouse进行有针对性的优化。同一批…...

大数据学习栈记——Neo4j的安装与使用

本文介绍图数据库Neofj的安装与使用&#xff0c;操作系统&#xff1a;Ubuntu24.04&#xff0c;Neofj版本&#xff1a;2025.04.0。 Apt安装 Neofj可以进行官网安装&#xff1a;Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法 最新版…...

React Native 导航系统实战(React Navigation)

导航系统实战&#xff08;React Navigation&#xff09; React Navigation 是 React Native 应用中最常用的导航库之一&#xff0c;它提供了多种导航模式&#xff0c;如堆栈导航&#xff08;Stack Navigator&#xff09;、标签导航&#xff08;Tab Navigator&#xff09;和抽屉…...

模型参数、模型存储精度、参数与显存

模型参数量衡量单位 M&#xff1a;百万&#xff08;Million&#xff09; B&#xff1a;十亿&#xff08;Billion&#xff09; 1 B 1000 M 1B 1000M 1B1000M 参数存储精度 模型参数是固定的&#xff0c;但是一个参数所表示多少字节不一定&#xff0c;需要看这个参数以什么…...

(二)原型模式

原型的功能是将一个已经存在的对象作为源目标,其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现,忽略对象创建过程中的其它细节。 📌 核心特点: 避免重复初…...

Qt Http Server模块功能及架构

Qt Http Server 是 Qt 6.0 中引入的一个新模块&#xff0c;它提供了一个轻量级的 HTTP 服务器实现&#xff0c;主要用于构建基于 HTTP 的应用程序和服务。 功能介绍&#xff1a; 主要功能 HTTP服务器功能&#xff1a; 支持 HTTP/1.1 协议 简单的请求/响应处理模型 支持 GET…...

Linux --进程控制

本文从以下五个方面来初步认识进程控制&#xff1a; 目录 进程创建 进程终止 进程等待 进程替换 模拟实现一个微型shell 进程创建 在Linux系统中我们可以在一个进程使用系统调用fork()来创建子进程&#xff0c;创建出来的进程就是子进程&#xff0c;原来的进程为父进程。…...

免费数学几何作图web平台

光锐软件免费数学工具&#xff0c;maths,数学制图&#xff0c;数学作图&#xff0c;几何作图&#xff0c;几何&#xff0c;AR开发,AR教育,增强现实,软件公司,XR,MR,VR,虚拟仿真,虚拟现实,混合现实,教育科技产品,职业模拟培训,高保真VR场景,结构互动课件,元宇宙http://xaglare.c…...

C++ 设计模式 《小明的奶茶加料风波》

&#x1f468;‍&#x1f393; 模式名称&#xff1a;装饰器模式&#xff08;Decorator Pattern&#xff09; &#x1f466; 小明最近上线了校园奶茶配送功能&#xff0c;业务火爆&#xff0c;大家都在加料&#xff1a; 有的同学要加波霸 &#x1f7e4;&#xff0c;有的要加椰果…...

day36-多路IO复用

一、基本概念 &#xff08;服务器多客户端模型&#xff09; 定义&#xff1a;单线程或单进程同时监测若干个文件描述符是否可以执行IO操作的能力 作用&#xff1a;应用程序通常需要处理来自多条事件流中的事件&#xff0c;比如我现在用的电脑&#xff0c;需要同时处理键盘鼠标…...

【Elasticsearch】Elasticsearch 在大数据生态圈的地位 实践经验

Elasticsearch 在大数据生态圈的地位 & 实践经验 1.Elasticsearch 的优势1.1 Elasticsearch 解决的核心问题1.1.1 传统方案的短板1.1.2 Elasticsearch 的解决方案 1.2 与大数据组件的对比优势1.3 关键优势技术支撑1.4 Elasticsearch 的竞品1.4.1 全文搜索领域1.4.2 日志分析…...