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

因为项目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.mfbz.cn/a/420354.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【打工日常】使用docker部署在线PDF工具

一、Stirling-PDF介绍 Stirling-PDF是一款功能强大的本地托管的基于 Web 的 PDF 操作工具,使用 docker部署。该自托管 Web 应用程序最初是由ChatGPT全权制作的,现已发展到包含广泛的功能来处理您的所有 PDF 需求。允许对 PDF 文件执行各种操作&#xff0…

Flutter中的三棵树

Widget Tree: 页面配置信息。 Element Tree: Widget tree的实例化对象,创建出renderObject,并关联到element.renderobject属性上,最后完成RenderObject Tree的创建。 RenderObject Tree:完成布局和图层绘制…

HTML---表单验证

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

【多线程】常见锁策略详解(面试常考题型)

目录 🌴 乐观锁 vs 悲观锁🎍重量级锁 vs 轻量级锁🍀自旋锁(Spin Lock)🎋公平锁 vs ⾮公平锁🌳可重⼊锁 vs 不可重⼊锁🎄读写锁⭕相关面试题 常⻅的锁策略 注意: 接下来讲解的锁策略不…

【办公类-25-01】20240304 UIBOT上传 ”班级主页-信息窗“

一、背景需求: 本学期制作了 “信息窗主题说明”合并A4内容 【办公类-22-07】周计划系列(3-1)“信息窗主题知识(提取)” (2024年调整版本)-CSDN博客文章浏览阅读797次,点赞7次&…

Nuclei SDK启动流程分析

欢迎关注“安全有理”微信公众号。 概述 以nuclei-sdk-0.5.0版本进行说明,编译SoC和开发板分别选择默认的evalsoc和nuclei_fpga_eval,启动的汇编代码参见startup_evalsoc.S。 复位 /* If BOOT_HARTID is not defined, default value is 0 */ #ifndef …

Linux系统加固:限制用户对资源的使用禁止IP源路由更改主机解析地址的顺序设置umask值

Linux系统加固:限制用户对资源的使用&禁止IP源路由&更改主机解析地址的顺序&设置umask值 1.1 限制用户对资源的使用1.2 禁止IP源路由1.3 更改主机解析地址的顺序1.4 禁止ip路由转发1.5 设置umask值 💖The Begin💖点点关注&#x…

外泌体相关基因肝癌临床模型预测——2-3分纯生信文章复现——02.数据格式整理(2)

内容如下: 1.外泌体和肝癌TCGA数据下载 2.数据格式整理 3.差异表达基因筛选 4.预后相关外泌体基因确定 5.拷贝数变异及突变图谱 6.外泌体基因功能注释 7.LASSO回归筛选外泌体预后模型 8.预后模型验证 9.预后模型鲁棒性分析 10.独立预后因素分析及与临床的…

alpine创建lnmp环境alpine安装nginx+php5.6+mysql

前言 制作lnmp环境,你可以在alpine基础镜像中安装相关的服务,也可以直接使用Dockerfile创建自己需要的环境镜像。 注意:提前确认自己的alpine版本,本次创建基于alpine3.6进行创建,官方在一些版本中删除了php5 1、拉取…

Java 小项目开发日记 04(文章接口的开发、oss图片上传)

Java 小项目开发日记 04&#xff08;文章接口的开发、oss图片上传&#xff09; 项目目录 配置文件&#xff08;pom.xml&#xff09; <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:sc…

面试问答总结之并发编程

文章目录 &#x1f412;个人主页&#x1f3c5;JavaEE系列专栏&#x1f4d6;前言&#xff1a;&#x1f380;多线程的优点、缺点&#x1f415;并发编程的核心问题 &#xff1a;不可见性、乱序性、非原子性&#x1fa80;不可见性&#x1fa80;乱序性&#x1fa80;非原子性&#x1…

Linux - 权限概念

Linux下有两种用户&#xff1a;超级用户&#xff08;root&#xff09;、普通用户。 超级用户&#xff1a;可以再linux系统下做任何事情&#xff0c;不受限制普通用户&#xff1a;在linux下做有限的事情超级用户的命令提示符是“#”&#xff0c;普通用户的命令提示符是“$” 命…

深入探究Python多进程编程:Multiprocessing模块基础与实战【第98篇—Multiprocessing模块】

深入探究Python多进程编程&#xff1a;Multiprocessing模块基础与实战 在Python编程中&#xff0c;多进程处理是一项关键的技术&#xff0c;特别是在需要处理大规模数据或执行耗时任务时。为了充分利用多核处理器的优势&#xff0c;Python提供了multiprocessing模块&#xff0…

G8-ACGAN理论

本文为&#x1f517;365天深度学习训练营 中的学习记录博客 原作者&#xff1a;K同学啊|接辅导、项目定制 我的环境&#xff1a; 1.语言&#xff1a;python3.7 2.编译器&#xff1a;pycharm 3.深度学习框架Pytorch 1.8.0cu111 一、对比分析 前面的文章介绍了CGAN&#xf…

Python批量提取文件夹中图片的名称及路径到指定的.txt文件中

目录 一、代码二、提取效果 一、代码 import os# 定义要保存的文件名 file_name "TestImage/Image_Visible_Gray.txt"# 读取文件夹路径 folder_path "TestImage/Image_Visible_Gray"# 遍历文件夹中的所有文件 with open(file_name, "w") as f…

132557-72-3,2,3,3-三甲基-3H-吲哚-5-磺酸,具有优异的反应活性和光学性能

132557-72-3&#xff0c;5-Sulfo-2,3,3-trimethyl indolenine sodium salt&#xff0c;2,3,3-三甲基-3H-吲哚-5-磺酸&#xff0c;具有优异的反应活性和光学性能&#xff0c;一种深棕色粉末 您好&#xff0c;欢迎来到新研之家 文章关键词&#xff1a;132557-72-3&#xff0c;5…

使用maven项目引入jQuery

最近在自学 springBoot &#xff0c;期间准备搞一个前后端不分离的东西&#xff0c;于是需要在 maven 中引入jQuery 依赖&#xff0c;网上百度了很多&#xff0c;这里来做一个总结。 1、pom.xml 导入依赖 打开我们项目的 pom.xml 文件&#xff0c;输入以下坐标。这里我使用的是…

[BUUCTF]-Reverse:reverse3解析

查看ida 从下图的/3和*4可以推断得出来是base64加密。 ida里大致意思就是我们输入的字符串经过base64加密&#xff0c;循环递减&#xff0c;最后等于str2&#xff0c;那我们输入的字符串就是flag。 完整exp&#xff1a; import base64 liste3nifIH9b_CndH print(len(list))fl…

2024年3月腾讯云服务器优惠价格曝光!这价格没谁了

腾讯云优惠活动2024新春采购节活动上线&#xff0c;云服务器价格已经出来了&#xff0c;云服务器61元一年起&#xff0c;配置和价格基本上和上个月没什么变化&#xff0c;但是新增了8888元代金券和会员续费优惠&#xff0c;腾讯云百科txybk.com整理腾讯云最新优惠活动云服务器配…

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

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