小程序直接用.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. [转帖]Jmeter插件之ServerAgent服务器性能监控工具的安装和使用

    https://www.cnblogs.com/pachongshangdexuebi/p/13354201.html 一.前言    性能测试时我们关注的重要指标是:并发用户数,TPS,请求成功率, ...

  2. [转帖]《Linux性能优化实战》笔记(八)—— 内存是怎么工作的

    一. 内存映射 我们通常所说的内存容量,指的是物理内存.物理内存也称为主存,大多数计算机用的主存都是动态随机访问内存(DRAM).只有内核才可以直接访问物理内存.那么,进程要访问内存时,该怎么办呢? ...

  3. BMC修改密码

    公司里的服务器都托管出去了, 为了好维护, 都给自己的机器设置了BMC远程管理的端口, 安全起见自己修改了密码. 方法很简单.默认用户密码是 用户:root 密码: root 用户:admin 密码: ...

  4. 记windows自定义bat脚本自启动

    自定义 Windows 启动脚本简化版 在本指南中,我们将使用一个简化的批处理文件(.bat)来演示如何创建自定义的 Windows 启动脚本.以下是一个基本的模板,您只需根据需要在 :begin 部 ...

  5. 手撕Vuex-添加全局$store

    经过上一篇的介绍,了解到了 Vuex 的实现本质就是一个插件,所以要做的事情就是实现这个插件的代码编写即可. 本篇文章主要是实现一个全局的 $store,这个 $store 是挂载在 Vue 的原型上 ...

  6. Redis中的key的生存时间和过期时间

    目录 1.说明 2.指令 2.1.删除和更新 3.过期时间的保存 4.计算剩余生存时间 5.过期键的删除策略 5.1.定时删除 5.2.惰性删除 5.3.定期删除 1.说明 生存时间: (Time T ...

  7. 营销(marketing)、推广(Promotion)和 运营(Operation)的概念分别是什么?

    首先要明确的原则: 1.你得承认"讨论任何事情之前不弄清楚概念定义就是耍流氓" 2.你得承认"由于每个人的经验学识和理解力的不同,我们常对概念定义产生分歧" 3 ...

  8. 手撕B树 | 二三查找树,B+树B*树你都会了吗? | 超详细的数据结构保姆级别实现

    说在前面 今天给大家带来B树系列数据结构的讲解! 博主为了这篇博客,做了很多准备,试了很多画图软件,就是为了让大家看得明白!希望大家不要吝啬一键三连啊!! 前言 那么这里博主先安利一下一些干货满满的专 ...

  9. P9247 [集训队互测 2018] 完美的队列题解

    题目链接:[集训队互测 2018] 完美的队列 神仙数据结构题,看了很多题解才搞懂.在做此题之前,最好对分块很熟悉,对各类标记非常熟练.考虑题意说的种类是相对于全局的.我们可以考虑局部影响对全局影响. ...

  10. 由反射引出的Java动态代理与静态代理

    写在开头 在<深入剖析Java中的反射,由浅入深,层层剥离!>这篇文章中我们讲反射时,曾提到过Java的动态代理中使用了反射技术,那么好,今天我们要就着反射的索引,来学习一下Java中的代 ...