小程序直接用.ttf字体文件,在开发工具看没有问题,但是打包编译会提示这个字体文件打包上传不成功。

一、字体文件转换为css

1、打开https://transfonter.org/

注意选择Base64 encode,Formats选择TTF

2、点击Add fonts按钮,上传字体ttf文件

3、点击Convert按钮进行字体转换

4、点击下载按钮,得到如下文件

二、使用字体

1、将下载回来的css文件放入项目,在根目录的app.scss文件中引入

@import "styles/font/bebas.css";

2、在需要的位置直接使用

font-family: 'Bebas';

End------------------------- 

Ten thousand sticky dreams

一万个粘稠的梦

lost to reality

敌不过一个现实

seer steals thief's cigarette

先知偷走盗贼的烟

and takes a puff

吞云吐雾

用Taro写一个微信小程序——引入外部字体的更多相关文章

  1. 用Taro写一个微信小程序(一)——开始一个项目

    一.Taro简介 1.名字由来 Taro['tɑ:roʊ],泰罗·奥特曼,宇宙警备队总教官,实力最强的奥特曼. 2.taro是什么 Taro 是一个开放式跨端跨框架解决方案,支持使用 React/Vu ...

  2. 微信小程序引入外部字体(字体图标过大,引入外链)

    1.把字体放在服务器上,因为字体图标比较大,小程序只支持2m 2.字体加载 3.检测是否加载成功(可能会存在https和http问题,防止跨域)

  3. 用Taro写一个微信小程序(二)——配置目录别名

    配置别名可以方便书写代码引用路径,让代码更整洁. 官方文档可参考https://nervjs.github.io/taro/docs/config-detail#alias 一.在config/ind ...

  4. 用Taro写一个微信小程序(三)—— 配置dva

    一.关于dva dva 首先是一个基于 redux 和 redux-saga 的数据流方案,然后为了简化开发体验,dva 还额外内置了 react-router 和 fetch,所以也可以理解为一个轻 ...

  5. 微信小程序——手把手教你写一个微信小程序

    前言 微信小程序年前的跳一跳确实是火了一把,然后呢一直没有时间去实践项目,一直想搞但是工作上不需要所以,嗯嗯嗯嗯嗯emmmmm..... 需求 小程序语音识别,全景图片观看,登录授权,获取个人基本信息 ...

  6. 微信小程序引入外部组件 iView Weapp

    iview Weapp组件的使用方法: 1. 下载小程序组件库 (前提是你已经有了项目目录) 你可以直接去github把iView Weapp的代码下载下来,也可以用过npm来下载. github地址 ...

  7. 微信小程序引入外部js 方法

    步骤: 1.首先将外部js放在你指定的文件夹里(这都是废话...) 2.接下来 将该js文件中你要使用的方法给暴露出来 3.在您要使用的js中引入该js 4.使用暴露出来的方法 例子:使用md5加密 ...

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

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

  9. 如何快速地开发一个微信小程序

    如何快速地开发一个微信小程序呢?我觉得作为初学者,最好能有一个模板,然后改这个模板. 同样作为初学者,刚开始的时候我有下面的几个问题,后来通过问同学,我弄清楚了. 微信小程序可以连接MySQL或者Sq ...

  10. 微信小程序引入md5.js

    今天给大家安利一下微信小程序引入md5.js的方法,不多说 md5.js在下面 直接复制到项目的utils/md5.js即可 /* * A JavaScript implementation of t ...

随机推荐

  1. [转帖]k8s对接ceph,ceph-csi方式

    1.上传ceph-csi-yaml和ceph-csi-image 两个文件夹到服务器 2.加载 ceph-csi-image里面的镜像 3.将加载好的镜像上传到本地harbor上. 4.修改ceph- ...

  2. 【转帖】nginx变量使用方法详解-3

    https://www.diewufeiyang.com/post/577.html 也有一些内建变量是支持改写的,其中一个例子是 $args. 这个变量在读取时返回当前请求的 URL 参数串(即请求 ...

  3. Springboot 使用nacos鉴权的简单步骤

    Springboot 使用nacos鉴权的简单步骤 背景 前端时间nacos爆出了漏洞. 因为他的默认token固定,容易被利用. 具体的问题为: QVD-2023-6271 漏洞描述:开源服务管理平 ...

  4. ContextSwitch 学习与使用

    ContextSwitch 学习与使用 说明 github上面有一个简单的测试系统调用以及上下文切换的工具. contextswitch. 下载之后直接make就可以进行简单的测试 需要注意的是 部分 ...

  5. [转帖]CKA 真题

    https://segmentfault.com/a/1190000021380185   1.列出pod并排序 kubectl get pod --sort-by .metadata.name 题目 ...

  6. css 宽度分离原则

    我们想设计一个w=180px:h=100px的div; .demo1 { width: 180px; height: 100px; background: pink; padding: 10px; b ...

  7. 【K哥爬虫普法】淘宝一亿快递信息泄漏,有人正在盯着你的网购!

    我国目前并未出台专门针对网络爬虫技术的法律规范,但在司法实践中,相关判决已屡见不鲜,K 哥特设了"K哥爬虫普法"专栏,本栏目通过对真实案例的分析,旨在提高广大爬虫工程师的法律意识, ...

  8. 【译】PEP-3129 类装饰器

    PEP原文 : https://www.python.org/dev/peps/pep-3129 PEP标题: Class Decorators PEP作者: Collin Winter 创建日期: ...

  9. 使用visio如何快速生成一个网格状图案,文档技巧!

    如何使用visio如何快速生成一个网格状图案 我的成果图: 操作步骤如下: 1.新建一个visio文件,选择"基本框图".点击创建. 2.从左侧形状窗口中基本形状中选中正方形拖动到 ...

  10. Python PyWin32 模块

    Python的生产效率极高,通过使用pypiwin32模块可以快速调用windows API函数,结合Python的高效开发能力,同等时间内比C++能更快的达到目标,pypiwin32模块封装了Win ...