在UniApp中引入大于40kb字体包的记录

news2024/11/15 7:04:57

因为项目UI需要特殊字体,所以给了一个80kb字体包,但是在正常的使用导入时候发现不生效

这是我的导入过程

1.把下载好的文件放入static/font目录中
2.在app.vue中引用
@font-face {

font-family: 'zitiming';

src: url('@/static/font/YouSheBiaoTiHei-2.ttf');

}

3.使用:
font-family:zitiming

但是不生效

原因 页面样式与布局 | uni-app官网

uni-app 支持使用字体图标,使用方式与普通 web 项目相同,需要注意以下几点:

  • 支持 base64 格式字体图标。
  • 支持网络路径字体图标。
  • 小程序不支持在 css 中使用本地文件,包括本地的背景图和字体文件。需以 base64 方式方可使用。
  • 网络路径必须加协议头 https
  • 从 http://www.iconfont.cn 上拷贝的代码,默认是没加协议头的。
  • 从 http://www.iconfont.cn 上下载的字体文件,都是同名字体(字体名都叫 iconfont,安装字体文件时可以看到),在 nvue 内使用时需要注意,此字体名重复可能会显示不正常,可以使用工具修改。
  • 使用本地路径图标字体需注意:
    1. 为方便开发者,在字体文件小于 40kb 时,uni-app 会自动将其转化为 base64 格式;
    2. 字体文件大于等于 40kb,仍转换为 base64 方式使用的话可能有性能问题,如开发者必须使用,则需自己将其转换为 base64 格式使用,或将其挪到服务器上,从网络地址引用;
    3. 字体文件的引用路径推荐使用以 ~@ 开头的绝对路径。

超过40kb需要转换为base64格式  File To Base64 Encoder | Convert any file | GiftOfSpeed

详细步骤

下拉到最后看到Usage of Base64 in CSS

复制里面的这段话

最后在app.vue中引入     @import url('static/DINCondensed/stylesheet.css');

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

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

相关文章

C++ //练习10.3 用accumulate求一个vector<int>中的元素之和。

C Primer(第5版) 练习 10.3 练习10.3 用accumulate求一个vector中的元素之和。 环境:Linux Ubuntu(云服务器) 工具:vim 代码块 /*******************************************************************…

【Pytorch】成功解决AttributeError: ‘tuple’ object has no attribute ‘dim’

【Pytorch】成功解决AttributeError: ‘tuple’ object has no attribute ‘dim’ 🌈 个人主页:高斯小哥 🔥 高质量专栏:Matplotlib之旅:零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入门教程&…

HTML---表单验证

文章目录 目录 本章目标 一.表单验证概述 二.表单选择器 属性过滤选择器 三.表单验证 表单验证的方法 总结 本章目标 掌握String对象的用法会使用表单选择器的选择页面元素会使用JQuery事件进行表单验证Ajax的概念和作用 一.表单验证概述 前端中的表单验证是在用户提交表…

《Spring Security 简易速速上手小册》第5章 高级认证技术(2024 最新版)

文章目录 5.1 OAuth2 和 OpenID Connect5.1.1 基础知识详解OAuth2OpenID Connect结合 OAuth2 和 OIDC 5.1.2 重点案例:使用 OAuth2 和 OpenID Connect 实现社交登录案例 Demo 5.1.3 拓展案例 1:访问受保护资源案例 Demo测试访问受保护资源 5.1.4 拓展案例…

HCIA-Datacom实验指导手册:7 构建简单 IPv6 网络

HCIA-Datacom实验指导手册:7 构建简单 IPv6 网络 一、实验介绍:二、实验拓扑:三、实验目的:四、配置步骤:步骤 1 设备基础配置设备命名 步骤 2 配置设备及接口 IPv6 功能步骤 3 配置接口的 link-local 地址&#xff0c…

c++数据结构算法复习基础-- 2 -- 线性表-单链表-常用操作接口-复杂度分析

1、链表 特点 每一个节点都是在堆内存上独立new出来的, 节点内存不连续优点 内存利用率高,不需要大块连续内存 插入和删除节点不需要移动其它节点,时间复杂度O(1)。 不需要专门进行扩容操作缺点 内存占用量大,每一个节点多出存…

使用 MongoDB Atlas 无服务器实例更高效地开发应用程序

使用 MongoDB Atlas无服务器实例更高效地开发应用程序 身为开发者,数据库并不一定需要您来操心。您可不想耗费时间来预配置集群或调整集群大小。同样地,您也不想操心因未能正确扩展而导致经费超标。 MongoDB Atlas 可为您提供多个数据库部署选项。虽然…

操作系统开篇

目录 一. 预备知识二. 操作系统的功能和目标2.1. 系统资源的管理者2.2 向上层提供方便易用的服务2.3 最接近硬件的软件 三. 操作系统的四个特征3.1 并发性3.2 共享性3.3 虚拟性3.4 异步性 四. 操作系统的发展与分类 \quad 一. 预备知识 \quad 计算机结构原理(Intel …

《PyTorch深度学习实践》第十三讲RNN进阶

一、 双向循环神经网络(Bidirectional Recurrent Neural Network,BiRNN)是一种常见的循环神经网络结构。与传统的循环神经网络只考虑历史时刻的信息不同,双向循环神经网络不仅考虑历史时刻的信息,还考虑未来时刻的信息…

一【初识EMC】

在作为硬件行业相关从业者,经常接触到EMC相关问题,下面来简单介绍下EMC相关方面的知识 文章目录 前言一、生活中的EMC现象?二、EMC是什么三、EMC的三要素四、EMI与EMS的评估方式1.RE2.CE3.HAR4.FLICKER5.Rs6.CS7.ESD8.EFT9.DIP10.PMS11.surge…

常见外设学习以及无线通信频率

常见外设 UART UART(Universal Asynchronous Receiver/Transmitter,通用异步收发器)是一种异步、串行、全双工的通信总线。 UART 有3根线,分别是:发送线(TX)、接收线(RX&#xff…

【LeetCode】一周中的第几天+ 一年中的第几天

2023-12-30 文章目录 一周中的第几天方法一:模拟思路步骤 方法二:调用库函数方法三:调用库函数 [1154. 一年中的第几天](https://leetcode.cn/problems/day-of-the-year/)方法一:直接计算思路: 方法二:调用…

rk3568 gamc0 控制器寄存器配置不了导致连接不上phy

系统启动 GMAC 的驱动开机 log 上出现打印:No PHY found 或者 Cannot attach to PHY。查阅rk 官方gmac 配置指导手册出现改问题的原因可能如下: 但反复检查硬件和软件发现都没问题。看内核启动日志发现gamc0 在启动过程中读取gmac0 的版本id是读取不到&a…

【golang】25、图片操作

用 “github.com/fogleman/gg” 可以画线, 框 用 “github.com/disintegration/imaging” 可以变换颜色 一、渲染 1.1 框和字 import "github.com/fogleman/gg"func DrawRectangles(inPath string, cRects []ColorTextRect, fnImgNameChange FnImgNameChange) (st…

Pinia使用

官方地址:Pinia | The intuitive store for Vue.js (vuejs.org)https://pinia.vuejs.org/ 1.安装 npm install pinia npm install pinia-plugin-persistedstate Pinia是一个基于Vue 3的状态管理库,它使得管理Vue的全局状态变得更加容易和直观。 而…

深度伪造,让网络钓鱼更加难以辨别

网络钓鱼一直是安全领域的一个突出话题,尽管这类诈骗形式已经存在了几十年,依旧是欺诈攻击或渗透组织的最有效方法之一。诈骗分子基于社会工程原理,通过邮件、网站以及电话、短信和社交媒体,利用人性(如冲动、不满、好…

CodeWhisperer安装教导--一步到位!以及本人使用Whisperer的初体验。

CodeWhisperer是亚马逊出品的一款基于机器学习的通用代码生成器,可实时提供代码建议。类似 Cursor 和Github AWS CodeWhisperer 亚马逊科技的CodeWhisperer是Amazon于2021年12月推出的一款代码补全工具,与GitHub Copilot类似。主要的功能有:代码补全注释…

力扣SQL50 进店却未进行过交易的顾客 查询

Problem: 1581. 进店却未进行过交易的顾客 文章目录 思路Code 思路 👨‍🏫 山山山林老木 左连接查询筛选 transation_id 为 null 的值group by customer_id Code select v.customer_id ,count(customer_id) count_no_trans from Visits v left jo…

速卖通店铺营销秘籍:如何巧妙运用活动提升转化率

对于速卖通卖家而言,想要提升店铺的成交率,除了依赖付费推广外,更重要的是如何通过店铺营销来吸引和留住潜在买家。今天,我们就来深入探讨一下速卖通店铺营销的几个关键策略。 首先,我们要明确一点,速卖通平…

基于springboot+vue的可盈保险合同管理系统

博主主页:猫头鹰源码 博主简介:Java领域优质创作者、CSDN博客专家、阿里云专家博主、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战,欢迎高校老师\讲师\同行交流合作 ​主要内容:毕业设计(Javaweb项目|小程序|Pyt…