uniapp引入字体样式和使用的方法

转载最新推荐文章于 2026-08-20 14:07:59 发布 1.3w 阅读 AI写同款

收录于

当前文章被收录于：

6 篇文章 0 人学习

QT小程序过程/问题的记录

订阅专栏查看详情

当前文章被以下社区和专栏收录：

MarryLin2021

码龄6年墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 1.3w累计阅读 1.4w+平均单平台已同步平台优快云微信公众号微博知乎掘金百家号博客园抖音小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网我也要 →

12粉丝·14篇原创

关注

uniapp导入字体包（最全流程）在uniapp做小程序或者App设置字体样式时，会碰到电脑调试字体是有的，但放到手机上就没有字体样式的情况。那是怎么回事呢？或许就是没有导入对应字体包的原因。以下就按步骤来具体讲解如何导入一个字体包。阅读详情

AI摘要

本文指导如何从网络下载.ttf字体，将其添加到UniApp项目font目录，并在项目中实现字体样式。涉及步骤包括下载字体文件、文件夹组织和实际使用方法。

uniapp引入字体样式和使用的方法

转载于知乎：https://zhuanlan.zhihu.com/p/432927503

1.先去网上下载需要的 .ttf 文件，

下载.ttf很简单，只需要复制你需要的字体样式代码在某度搜索一下就可以，上图！
在这里插入图片描述

就是这样然后找到对应的字体，进入下载

2.在你的uniapp项目下新建一个目录，然后将下载.ttf文件直接拖进这个font目录下就可以，直接上图！

在这里插入图片描述

3.这一步就是在项目中使用了，

在这里插入图片描述

标签

#开发语言 #编辑器

原文链接：https://zhuanlan.zhihu.com/p/432927503>

uniapp使用第三方字体(比如宋体楷体等非图标)已解决，字体包过大（提取字体） uniapp使用第三方字体(比如宋体楷体等非图标)已解决原帖：原帖链接 1.下载字体并转换成base64格式转换链接：转换链接 2.创建存放base64文件的css 注意复制的base????不要换行不要换行不要换行不要换行 url(‘加引号’) 3.在App.vue中引入 @import ‘./common/font/family.css’; 4.使用 font-family:你定义的名字... 阅读详情

相关推荐

uniapp 使用鸿蒙开源字体

全局使用鸿蒙字体。

1710orange的温馨小窝 1931

uniapp使用第三方字体

九亿宅男的梦的博客 7557

使用uniapp开发小程序-【引入字体并全局使用】

UniApp小程序引入自定义字体方法：在App.vue中使用@font-face定义网络字体...

weixin_48596030的博客 796

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

在 UniApp 中设置和引入自定义字体（如 .ttf、.woff、.woff2 等格式）通常涉及几个步骤。但在 UniApp 中，可能需要直接使用相对路径或绝对路径。确保路径指向字体文件。文件夹下的文件不会被 Webpack 处理，而是直接复制到最终的打包目录中。行业内幕，洞察先机。确保有权使用这些字体，并遵守任何相关的许可协议。是 Vue CLI 项目中常用的别名，它指向。将字体文件放入你的 UniApp 项目的。首先，你需要有字体文件。部分或单独的 CSS 文件），使用。规则来定义你的字体。

肥晨开发的学习之路 7024

四自由度SCARA机器人的运动学和动力学MATLAB建模与仿真

本文介绍了四自由度SCARA机器人的运动学和动力学建模，使用MATLAB进行了相应的建模与仿真。通过正运动学和动力学分析，可以了解机器人在不同状态下的运动特性和力学特性。这为后续的控制算法设计和性能优化打下了基础。希望本教程对学习SCARA机器人有帮助。

小蜗牛的珍贵百宝箱 3636

解析vCard 3.0：提取电子名片中的姓名

N:LastName;FirstName;;;END:VCARD和END:VCARD标记数据块的开始和结束。N字段存储结构化姓名（分号分隔）。FN字段为直接可读的显示名称。其他字段如TELEMAIL等保存联系信息。

qq_45797625的博客 2778

uniapp 引入并使用外部字体

前端小胡兔的博客 4189

01、【solidworks】windosws正在配置solidworks问题及注册表未卸载干净问题解决

windosws正在配置solidworks问题及注册表未卸载干净问题解决

qq_740388770的博客 2万+

UniApp 设置全局字体样式和背景色

本文详细介绍了在UniApp中设置全局字体样式和背景色的多种方法：1. 在App.vue中直接定义全局样式；2

weixin_72329752的博客 228

Windows下Anaconda换清华镜像源最全指南（含常见问题解决）

本文提供了一份详尽的Windows系统下Anaconda配置清华镜像源的完整指南。针对网络下载缓慢的痛点，文章详细对比了命令行添加与直接编辑配置文件两种主流方法，并重点解决了配置过程中常见的文件缺失、安装失败、环境求解缓慢等疑难问题，帮助用户一劳永逸地提升包管理效率。

brandy的博客 337

C#实战：手把手教你用SerialPort实现RS485 ModbusRTU通信（附完整代码）

本文详细介绍了如何使用C#的SerialPort类实现RS485 ModbusRTU通信，包括硬件准备、串口配置、数据收发核心逻辑及高级通信技巧。通过实战案例和完整代码，帮助开发者快速掌握工业级通信框架的构建方法，提升设备间通信的稳定性和效率。

weixin_29207533的博客 254

uniapp中的样式

1.rpx自适应单位。 2.在vue文件中可以通过@import(url:)来引入外部的样式。 3.在app.vue中定义的是全局的样式，vue文件中的局部样式会覆盖全局样式。 4.uni-app中使用字体图标。在app.vue的style中引入字体图标，@import（url：），同级的文件要在前面加上./；将字体图标中的@font-face格式修改，在url前面加上~@; 使用时加上class=“字体图标的类” 5.uni-app中使用scss。 style lang=“scss”。

wu9caiji的博客 555

Google Play上架：谷歌2024年5月份审核政策改动，审核强度逐步提升

专业解决各种上架过包问题，专业团队专业处理 3187

uniapp小程序中使用iconfont字体图标

1.Uniapp小程序项目的common文件夹下面新建iconfont.css文件，App.vue文件中全局引入样式 2.iconfont官网： https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2 2.1 选中iconfont字体图标，添加入库 2.2 添加至新项目，图标管理-我的项目 2.3 可直接复制代码，也可先点击下方新icon来源，生成新代码后再复制，复制到uniapp小程序项目的common下新建的ico

m0_49529959的博客 1709

基于深度学习YOLOv10的人脸表情识别系统（附完整资源+PySide6界面+训练代码）

本文介绍了如何基于YOLOv10实现一个人脸表情识别系统。我们从数据集准备、模型训练到PySide6界面实现进行了详细的讲解。通过该系统，用户可以实时检测和分类人脸表情，为情感分析、智能交互等应用场景提供支持。

YOLO 1053

【毕设救星】从0到1打造YOLOv8货架商品检测与可视化系统，让你的毕设脱颖而出

本文介绍了一个基于YOLOv8的货架商品检测系统毕设项目。系统采用YOLOv8模型进行商品检测，包含环境搭建、数据集准备、模型训练与验证等完整流程，并开发了可视化UI界面。项目聚焦智能零售应用场景，技术栈完整且易于实现，适合作为计算机视觉方向的毕业设计。文章详细指导了从数据标注、模型训练到界面开发的全过程，提供代码示例和实用建议，帮助学生快速完成毕设并提升答辩表现。

LXY_LOVE36的博客 103

带你用uniapp从零开发一个仿小米商场_2.创建空白项目及公共样式引入

3.是static文件夹,一些放前端服务器的静态资源将保存在此处,比如程序logo,字体样式,在这个地方引入了一个字体图标库,但是我们static下面根本,没有这个字体,所以会报错。可以直接去animate.css官网下载然后再引入,也可以直接用npm引入。如果你是第一次运行,那么这里会让你安装插件,安装好后再次运行就好。tips: 这里直接删是因为,这只是一个当作教学的项目,正式项目中可别这样。这是uniapp的 uni.css 的报错,可以看报错的地方。唉,都在这里面了,就直接全部引入吧。

JiuMeilove的博客 7850

visio安装包

Microsoft Office Visio 是一款专业的制图软件。利用经过更新的形状、协作工具和数据链接图表，创建专业级图表以简化复杂的信息。

uniapp配置app-plus搜索栏

pages.json "pages": [ { "path": "pages/index/index", "style": { "navigationBarTitleText": "首页", "app-plus":{ "scrollIndicator": "none", "titleNView": { "backgroundColor": "#FFFFFF", // 搜索框 "searchInput": { "align": "

【03】的博客 7109

计算机控制技术及应用

《计算机控制技术及应用》通过总结作者的科研成果和吸收国内外的先进理论、方法和技术，以计算机控制系统的网络化、开放化、智能化和集成化发展趋势为主线索，主要介绍计算机控制系统的基本概念和计算机控制系统的典型形式，计算机控制系统的数学描述与基本分析方法，以及数字PID控制器、最少拍控制系统、达林算法、状态变量设计法等设计方法及其各种改进算法。重点突出计算机控制系统输入输出通道接口的设计方法和典型控制系统的设计案例与实现方法等。

lwip-2.0.3

lwip是瑞典计算机科学院(SICS)的Adam Dunkels 开发的一个小型开源的TCP/IP协议栈。实现的重点是在保持TCP协议主要功能的基础上减少对RAM 的占用。

Uniapp在Vue环境中引入iconfont图标库（详细教程）

Uniapp在Vue环境中如何引入iconfont图标库的详细教程

驴大毛的博客 2063

TMS_WebGMaps_1.9.8.0_Full_Source

TMS_WebGMaps_1.9.8.0_Full_Source 全源码 delphi cbuilder

uni-app组件基本使用

text 组件相当于行内标签、在同一行显示，类似于span 要变成块级元素在下一行显示，裹一层组件即可。

weixin_40086938的博客 1295

uni-app开发中遇到的问题（持续更新...）

去掉顶部导航栏在pages.json里面进行配置：去掉所有页面的顶部导航栏 "globalStyle": { "navigationBarTextStyle": "black", "navigationBarTitleText": "uni-app", "navigationBarBackgroundColor": "#F8F8F8", "backgroundColor": "#F8F8F8" "navigationStyle":"custom", "app-plus":{ "title

Serena_tz的博客 3801

uniapp nvue 踩坑记录

不支持复杂css选择器，请使用class选择器可以使用scss 文字应被text标签包裹字体样式不会被子元素继承默认布局为flex，且flex-direction默认为column纵向排列 css无法使用百分比、vw / vh 纵向全屏请使用flex: 1；横向全屏可以用width: 750rpx 图片应使用image标签图片显示模式应给标签设置resize属性，值为 cover（纵向完整） / contain（横向完整） / stretch（缩放）不支持background-image，需要背.

挚友阳光的博客 1591

uniapp中引入字体本地和在线引入。

本地引入字体文件，ttf格式，查看文件属性大小，字体图标超过40k需要转换。可以转换成css文件格式的或者是其他格式的，再引入即可，闲了再写

weixin_45803990的博客 1万+

UNIAPP 怎么引入字体

第一种网络字体地址 const url = 'https://sungd.github.io/Pacifico.ttf' loadFontWeb() { uni.loadFontFace({ family: 'font-test', source: `url("${url}")` }) }, 第二种本地字体地址第...

陈小白 1万+

【小程序开发】uniapp引入iconfont图标及使用方式

你还在发愁不知道如何在uniapp开发中使用iconfont阿里图标库吗？你还在是下载一张张图片用来开发项目嘛？来试试这个iconfont图标库，很香的

qq_49002903的博客 6万+

uniapp引入字体文件

转换地址点我进去将下载好的字体放进项目中 static里面文件大于40kb需要转成base64格式转换完之后把代码复制下来新创建一个css 然后copy进去 @font-face { font-family:'itemfont'; src: url(data:application/font-ttf;charset=utf-8;base64,我所在的位置把转换后的代码全部copy进来 } App.vue引入css <style lang="scss"> @im

weixin_44860425的博客 2934

上一篇： git分支开发的原理【转载】

下一篇： css动态计算元素的高度及宽度

uniapp 使用鸿蒙开源字体

1710orange的温馨小窝

02-12

1931