基于uni-app的微信小程序引入字体文件

uniapp导入字体包(最全流程) 在uniapp做小程序或者App设置字体样式时,会碰到电脑调试字体是有的,但放到手机上就没有字体样式的情况。那是怎么回事呢?或许就是没有导入对应字体包的原因。以下就按步骤来具体讲解如何导入一个字体包。 阅读详情
  1. 上传字体文件至服务器或者oss(也可以引入第三方,需支持nginx跨域)
  2. 引入字体文件(两种方法)
    • css引入

      @font-face {
        font-family: 'fontFamily';
        src: url("https://xxxxxxx/fontFile.ttf?_=2019121810"); 
        /* 小程序似乎只支持线上文件的引入,文件还不能过大*/ 
      }
      .test{
      	font-family: fontFamily;/* 不需要引号 */
      }
      
    • js引入

      let [err, res] = await uni.loadFontFace({
      	family: 'fontFamily', 
      	source: 'url("https://xxxxxxx/fontFile.ttf?_=2019121810")'
      });
      // 使用是和css引入一样的 font-family: fontFamily;
      

tip:uni-app的文档上说loadFontFace接口引入字体需要在app.vue,而我在app.vue上使用并没有返回值,在需要引入的页面的onload函数中使用才成功

  1. 配置Nginx跨域(解决安卓机型小程序字体没生效的问题),成功后headers会有如下项
location ~* \.(eot|ttf|woff|woff2|svg)$ {
	root /data/youzan/;
	add_header Access-Control-Allow-Origin *;
}

跨域配置

到这里就大功告成啦!

效果图

uni-app小程序图标管理:三种远程引入iconfont方案详解 在前端开发中,图标资源管理是构建用户界面的基础环节。传统方案通常需要将字体文件下载到本地项目,这不仅增加了包体积,也带来了跨平台路径和更新维护的复杂性。其核心原理是通过CSS的@font-face规则或SVG的<use>元素,实现对远程图标资源的动态引用,从而实现资源与代码的解耦。这种解耦的技术价值在于显著减小了应用包体积,并支持图标的远程热更新,对于包体积极其敏感的小程序场景尤为重要。在uni-app多端开发框架中,图标方案的选择直接影响到开发体验、性能表现和跨端兼容性。本文聚焦于无需下载文件的远程引入方 阅读详情

相关推荐

uni-app微信小程序高效引入iconfont图标:三种远程引用方案详解

在Web前端开发中,图标资源管理是提升开发效率的关键环节。其核心原理是通过字体文件或SVG技术将图标矢量化,实现无损缩放与统一管理。从技术价值看,这不仅能减少HTTP请求、优化性能,还能确保视觉一致性。在工程实践中,阿里巴巴矢量图标库(iconfont)作为国内主流图标管理平台,为开发者提供了便捷的云端资源托管方案。尤其在uni-app跨端开发微信小程序时,由于小程序对静态资源的严格限制,传统的本地文件引入方式常遇到路径与加载问题。通过远程引用iconfont资源,开发者可以聚焦于Font Class与Sy

weixin_30267785的博客 424

uniapp引入第三方字体库如(宋体、喜鹊燕书体、字小魂歌以晓手迹行楷体等) 最优解决方案

uniapp 开发小程序时 怎么样使用第三方字体库(比如宋体、楷体等)呢

@微你 6637

uni.loadFontFace加载本地字体踩坑记!

在Uniapp项目中,使用uni.loadFontFace加载本地字体时,常见错误是直接在source属性中写入字体路径,而忽略了url()的包裹。正确做法是将字体路径用url()包裹,如url(/static/font/MiSans-Normal.ttf)。此外,字体文件应放置在/static/目录下,以确保打包时包含。虽然微信小程序官方文档提到只支持HTTPS网络字体,但实际测试表明,通过url()包装的本地字体也能正常加载。推荐使用.ttf或.woff格式的字体文件,以确保兼容性。总之,加载本地字体失

代码简单说 Vue、JAVA、PHP、Node.js 熟练运用,接口、架构、性能全搞定。 1153

uniapp使用第三方字体

uniapp使用第三方字体

九亿宅男的梦的博客 7558

2024年五大革新图像分割模型解析:架构创新与实战应用指南

本文深入解析2024年五大革新图像分割模型,包括SAM2、Mask2Former、DINOv2和Swin Transformer等,探讨其架构创新与实战应用。从多尺度处理、提示交互到自监督学习,这些模型在精度提升、效率优化和交互增强方面取得突破,广泛应用于医疗影像、工业质检和智慧城市等领域。

hadoop5ranger的博客 894

uni-app蓝牙MTU设置失效探因:从20字节限制到跨设备兼容性实战

本文深入探讨了uni-app蓝牙开发中MTU设置失效的常见问题,特别是20字节限制的成因及解决方案。通过分析设备兼容性、蓝牙协议栈特性和系统版本差异,提供了智能延迟策略、设备特征检测和渐进式MTU提升等实战方案,帮助开发者优化蓝牙数据传输效率。

weixin_29289821的博客 288

uniapp 引入并使用外部字体

uniapp 引入并使用外部字体

前端小胡兔的博客 4189

Tessent IJTAG ICL:从规范到实践的硬件描述语言指南

本文深入解析Tessent IJTAG ICL语言在硬件测试中的应用,从规范到实践提供全面指南。通过模块化设计、网络提取与编辑等实战技巧,帮助工程师高效构建标准化测试网络,显著提升芯片测试效率与覆盖率。特别分享TDR/SIB/TAP的ICL实现方法及调试策略,适用于SoC、车载芯片等复杂场景。

weixin_33606346的博客 300

uniapp加载第三方字体(微信小程序测试通过)

一。CSS远程加载 App.vue @font-face{ font-family: font-name; src:url('https://XXXXX/font.ttf'); } 在微信小程序的开发者工具里面有用,但是(安卓)真机调试没有用 二、使用API uni.loadFontFace() App.vue onload(){}中 uni.loadFontFace({ family: 'Bitstream Vera Serif Bold', source: 'ur

juceli的博客 2561

解码运动想象:BCI Competition IV 2a数据集实战指南

本文提供了BCI Competition IV 2a数据集的实战指南,详细解析了该经典运动想象脑电数据集的结构、文件格式与实验范式。通过MNE-Python等工具,逐步演示了从原始信号读取、预处理(通道选择、滤波、分段)到特征提取(CSP、频带功率)和模型训练(LDA、SVM)的完整流程,并强调了受试者独立评估的重要性,为BCI研究者提供了可复现的入门与进阶路径。

weixin_29304985的博客 362

STM32 HAL库状态机实现按键多事件检测(无阻塞高效处理)

本文详细介绍基于STM32 HAL库的状态机实现按键多事件检测方法,包括单击、双击等高效无阻塞处理。通过定时器中断和GPIO中断优化,结合状态机设计,显著提升系统响应效率和实时性,适用于嵌入式系统开发。

tech5的博客 1016

在Uni-App中使用阿里字体图标库

在使用Uni-App框架开发微信小程序时,需要用到阿里字体图标库,本来是在public/index.html中通过link引入了图标的在线地址,通过npm run serve运行到浏览器上可以正常显示;但是npm run dev:mp-weixin之后图标就消失了。所以这里记录一下本地使用阿里字体库的方法。 下载 首先,选择好你需要的图标,添加至项目;在项目中点击下载至本地(此处下载的是Font class)。 解压 将压缩包中的代码解压到项目中,可以放在src/static中,也可以在src中新建一个目

lynn_nobody的博客 1427

缠论 公式 自动画线 画笔 中枢 买卖点 源代码

【代码】缠论 公式 自动画线 画笔 中枢 买卖点 源代码。

weixin_40835859的博客 2万+

uni-app 今天也要努力写项目NO.1

引入字体图标 首先在网页上下载自己需要的图标 网址如下:https://www.aigei.com/icon/class/film_8/?detailTab=file 然后将下载的图标放进static位置里 在文件papes.json里写入代码 "tabBar":{ "color":"#000000", //字体默认颜色 "selectedColor":"#aa55ff", //字体点击后颜色 "backgroundColor":"#ffffff", //背景颜色 "posi.

white_or_abc的博客 942

affymatrix探针转换 | GPL5175探针对应的基因转换

一般情况下,有一些比较成熟的对应平台的注释数据集的R包。但是这个注释平台,我在Bioconductor上找了一圈都没有找到。只能通过最原始也最可靠的方法,从GEO数据集上去下载这部分的注释文件。以下展示全过程。 我要检查的数据平台是:GPL5157。 数据集的注释集链接为:https://www.ncbi.nlm.nih.gov/geo/query/acc.cgi?acc=GPL5175 这个注释数据集比较难弄的地方在于,它的基因集注释的不太好。没有比较直接的可供提取的genesample的信息;在ge.

weixin_40640700的博客 7124

OceanSim: 基于Isaac Sim GPU 加速水下机器人感知仿真框架

OceanSim 采用先进的基于物理的渲染技术,对水下视觉和声学传感器进行精确建模。与其他模拟引擎相比,OceanSim 的渲染速度要快得多。作为 NVIDIA Issac Sim 的扩展,OceanSim 采用了多功能设计。通过融入快速发展的 NVIDIA Omniverse 生态系统,我们的模拟器自然而然地在机器人学习和水下机器人技术之间架起了一座桥梁,从而促进了水下应用中体现型人工智能技术的开发和部署。OceanSim 将以开放源码的方式提供,使研究界能够以合作的模式作出贡献。

机器人控制与仿真应用 2050

uniapp 微信小程序在线引入字体图标

小程序开发中遇到字体图标跨域问题导致真机调试不显示,模拟器正常。原因是字体图标与小程序域名不同引发跨域限制。解决方案是将字体图标文件迁移至小程序同一域名下即可正常显示。该问题常见于第三方字体资源调用场景,统一域名可有效解决跨域访问限制。

weixin_47517731的博客 317

Probability and Statistics - 4th edition

Probability and Statistics - 4th edition

uniapp引入icofont,运行h5没问题,在微信小程序不显示

我这个是uniapp项目,字体图标都是一样的,在vue项目中web端、uniapp运行到h5都没问题,但是运行到小程序加载不出来。这是我个人的微信小程序,还请各位路过的老板帮忙加加人气。亲测 用下面的方法有效。

weixin_41911870的博客 409

NTscan扫描工具

ntscan是一个扫描器,可以扫描没有密码和弱密码的共享,先到配置文件中填写猜测的用户名和密码,扫描过程中右侧出现的是扫描日志。

C# WinForm 基于DirectShow.dll编写的程序,可边预览边保存视频,音频和图片

基于微软的DirectShow.dll的二次开发1.自动识别连接的摄像头跟麦克风且可以对其进行选择(默认选中第一个)2.可录制wmv和avi两种格式的视频并且都带有音频,avi可以录制的分辨率和帧数进行选择,wmv默认进行了淸晰度优化如不喜欢可去除代码中有相关提示3.可在预览点开之后进行拍照,也可边录制视频边拍照4.添加了视频和音频的压缩功能(酌情使用)这次二次开发发现C#对DirectShow的相关信息太少,这次做完也不敢藏私共享出来,还望大家指正

uni-app项目实战笔记11--定义scss颜色变量方便页面引用

前面的@/不可少,要以英文分号结尾。如果页面中引入了自定义的样式,uni.scss也正确引入了,需要把HBuilder X项目重新启动才会生效,要不然会报错。如果像上面替换了不起作用,有可能是行内样式,被覆盖了(调试时会发现样式代码被横线划掉),可以使用!在 Vue 3 的 <style scoped> 或 微信小程序自定义组件的样式隔离 环境下,默认无法直接修改子组件的样式。则不能直接使用$brand-theme-color来引用,需要在<style>中定义样式才能使用颜色变量,:deep() 的作用。

shenxiaomo1688的博客 654

TMS_WebGMaps_1.9.8.0_Full_Source

TMS_WebGMaps_1.9.8.0_Full_Source 全源码 delphi cbuilder

uni-app跨端图标方案:基于iconfont的字体图标接入与实战指南

跨端应用开发中,图标资源的多端渲染不一致是高频难题,常导致H5正常而小程序显示方框。iconfont字体图标通过单一字体文件封装,统一了图标命名、尺寸与颜色接口,成为uni-app项目的理想方案。其原理是借助@font-face将矢量字形映射为字符码,结合Font class或SVG Symbol实现轻量、跨端稳定的图标渲染。该方案兼顾性能与可维护性,适用于小程序、H5、App多端场景,尤其适合对包体积敏感的项目。本文从方案对比、配置细节到真机兼容处理,系统梳理了uni-app中完整落地iconfont的经

weixin_29009881的博客 249

关于uniapp中如何使用阿里字体库的字体

如何在微信小程序中使用阿里字体?首先从阿里图标库下载所需字体子集(如"我是一只"),并通过transfonter.org转换为WOFF格式。将转换后的文件放入项目目录,在app.vue中引入。使用时指定font-family和font-size即可显示。注意:字体文件需小于40KB,建议使用TTF/WOFF格式,大文件可能影响加载速度。使用示例:<text style="font-size:100rpx;font-family:'AlimamaDaoLiTi'&quo

weixin_67093879的博客 637

uniapp引入iconfont字体图标在微信小程序中适用

在开发uniapp项目的时候,难免需要用到图标,虽然uniapp扩展组件uni-icons可以使用图标,但是比较图标的数量有限,有时候不能满足我们的需求,所以经常会要用到iconfont图标库。

嗨,大家好,我是爱搞知识的咸虾米 606

uni/微信小程序 - 使用外部字体

字体图标/字体仅支持网络css路径(也就是不支持本地路径)     参考于:https://blog.youkuaiyun.com/u013451157/article/details/79825740  

weixin_34130389的博客 1850

uni-app开发微信小程序引入iconfont上传的时候提示文件无法上传

现象 在微信开发者工具上显示正常,但是点击微信开发者工具的预览时会提示.ttf等文件上传失败 解决办法 将存放在static目录下的iconfont文件转移到其他的文件夹项目,比如我在根目录建了个style ...

九段刀客的博客 2009

uni-app 字体图标实战:nxdc-milktea 项目中 iconfont 的引入、管理与按需使用全指南

nxdc-milktea 是一套仿奈雪の茶小程序的前端模板,基于 uni-app 开发,可同时编译到微信小程序、H5 等多个端。在这样一个"奶茶点单 + 会员积分 + 支付"功能齐全的项目里,页面上的箭头、勾选、微信支付、积分、收藏等小图标,几乎全部由 **iconfont 字体图标** 承担。本文以 nxdc-milktea 为真实案例,带你完整走一遍 **uni-app 项目中 iconfon

gitblog_01053的博客 915

uni-app,微信小程序引入外部自定义字体库loadFontFace,css引入自定义字体@font-face

微信小程序开发引入外部自定义字体loadFontFace,网页页面引入外部自定义字体@font-face,css使用自定义字体和网络字体

& 圆 。的博客 1278
上一篇: js中for循环的几种结束方法
下一篇: vim编辑器配置备份——前端(vue)
時が止まる
博客等级 码龄8年 38粉丝 12原创
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值