微信小程序：引入自定义字体

已于 2023-06-16 17:49:33 修改
阅读量2.6k 收藏 4
点赞数
分类专栏： 微信小程序实战全记录 文章标签： 微信小程序 引入外部字体 小程序
于 2019-12-30 18:38:05 首次发布
本文为博主原创文章，未经博主允许不得镜像、转载。
本文链接：https://blog.csdn.net/qq_21041889/article/details/103770961
版权

微信小程序引入外部字体

看了网上很多文章后发现可以把字体上传到Online @font-face generator — Transfonter转成base64后下载下来， 引入对应css后发现太大啦，

然后在网上搜罗了一番，发现了一个神奇的网站可以在线提取字体在线字体提取工具,字体子集生成器 - 在线工具 - 字客网

（此方法仅适用于已知会用到的字）

然后再到这个网站Online @font-face generator — Transfonter转成base64只有十几k。

==================&#

了解本专栏 订阅专栏 解锁全文 超级会员免费看
Dove言和
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
微信小程序 - 详细引入并使用第三方字体（使用网络字体艺术字）
王佳斌
09-01 8191
微信小程序使用网络字体，小程序中如何加载使用第三方字体，小程序引用网络字体在安卓无效，小程序动态加载网络字体，微信小程序中使用自定义字体的实现与体验优化，微信小程序使用其他字体，微信小程序使用网络字体、阿里云OSS网络字体，如何在微信小程序内使用外部字体，微信小程序如何添加外部字体，微信小程序可以引用特殊字体吗，微信小程序如何使用CSS3字体 ，微信小程序--引用外部字体，微信小程序引入字体，在微信小程序中引入自定义字体以及iconfont图标,微信小程序 引入第三方字体,微信小程序加载第三方字体，微信小程
微信小程序自定义标题组件
03-11
在微信小程序中，自定义标题组件（custom-navbar）是一个非常重要的功能，它允许开发者根据自己的需求和设计风格创建个性化、功能丰富的页面顶部导航栏。微信小程序的原生导航栏虽然提供了基本样式和功能，但有时...
微信小程序----引入外部字体库iconfont的图标
热门推荐
止于至善
12-22 3万+
直接使用阿里巴巴的网络路径选择iconfont图标 官网：阿里巴巴矢量字体库 步骤：阿里巴巴字体库使用方法 全局引入app.wxss@font-face { font-family: 'iconfont'; /* project id 518032 */ src: url('//at.alicdn.com/t/font_518032_t2q88z3jok8iwwmi.eot');
2024年HarmonyOS鸿蒙最全微信小程序详解_小程序 div view p，面试要怎么练
最新发布
2401_84857523的博客
05-14 466
定义模板有两种方式：方式一：直接在index.wxml中定义，并在index.wxml中使用，这种方式只能在当前页面中使用定义模板：使用 name 属性，作为模板的名字。然后在内定义代码片段使用模板：使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入，如：-- 定义模板 -->-- 使用模板 -->方式二：使用外部.wxml文件模板。
【教程】微信小程序导入外部字体详细流程
WHY的博客
09-18 3735
本文介绍了如何在微信小程序中导入外部字体，包括字体导入API的使用以及字体资源在服务器上的部署和访问等内容
微信小程序使用自定义字体的三种方法
weixin_40762926的博客
09-30 1万+
一、loadFontFace接口 小程序官方提供的接口，最便捷的加载字体的方法，不过限制颇多。必须https且同源，canvas等原生组件不支持。注意！！使用本地文件无效，必须使用网络地址。 官方文档 演示代码： wx.loadFontFace({ family: 'FZSuXSLSJW', source: 'url("https://we7.stuyun.com/FZSuXSLSJW.ttf")', success: res => { console.log('font
微信小程序引入外部的CSS或iconfont
m0_73341533的博客
01-30 2834
iconfont作为一种特殊的CSS也逃不开这个命运，小程序的wxss文件font-face中的url不接受HTTP地址参数，但是接受base64，因此而我们可以将字体文件下载后转化为base64.将下载文件目录下.css文件直接修改成.wcss文件，放置到项目目录下，在开发者工具中打开，复制下面加在文件中。将第一步中下载的文件中iconfont.css用记事板打开复制选中代码。保存文件，就可以在需要地方引入文件了，在wxml中就可以使用图标了。)寻找需要的字体图标，并下载，在压缩包中找到ttf格式文件。
微信小程序引入使用fontawesome图标库【内附懒人包下载导入即用】
weixin_44229624的博客
08-08 2192
小程序引入fontawesome需要做的步骤是比其他的多一点，比如说本质上下载下来fontawsome没法直接用，他有好多的css，其实也有好多TTF的字体文件，对于他的这种 TTF的文件是需要给它进行一个转换，转换之后把它变成是比如说base64，它编码变成之后再把它引入到我们的项目中。
微信小程序 - 引入第三方字体（使用网络字体）
也简的博客
04-18 8313
微信小程序 - 引入第三方字体（使用网络字体）
小程序引入第三方字体
m0_49403042的博客
12-15 556
小程序引入第三方字体
小程序：加载网络字体
轻风细雨_林木木
09-16 1948
备注：字体加载需要时间，因此会存在字体替换闪动，解决办法很简单，在加载字体的时候进行loding……显示就可以了。 1.新建小程序项目getFontDemo； 2.建立font_demo页面文件； 3.设置服务器的字体文件（https设置参考我的http转https笔记：https://blog.csdn.net/weixin_35773751/article/details/10...
微信小程序自定义tabbar源码
03-22
在微信小程序开发中，自定义tabbar是一项常见的需求，它能帮助开发者实现更符合自己应用风格的底部导航栏。微信小程序官方提供了默认的tabbar样式，但有时这并不足以满足所有设计需求，因此，自定义tabbar源码的编写...
微信小程序自定义底部导航栏原生语法
08-10
如果多个页面都需要使用这个自定义导航栏，可以考虑使用微信小程序的全局变量或引入第三方的状态管理库如Vuex，来协调不同页面间的导航状态。 5. **样式设计** 自定义导航栏的样式可以在`index.wxss`中定义，通过...
微信小程序Toast自定义组件
08-10
微信小程序 Toast 自定义组件是开发者为了提供更灵活、个性化的提示信息展示方式而设计的一种组件。在微信小程序的原生框架中，虽然内置了简单的 Toast 功能，但其功能有限，仅能显示预设的几种提示类型。因此，通过...
uniapp 微信小程序 时间段选择组件
07-24
总之，`uniapp`微信小程序的时间段选择组件涉及到了`uni-app`的基础知识，如组件化开发、数据绑定、事件处理等，同时也涵盖了微信小程序的特定API和自定义样式设计。通过学习和实践，开发者可以构建出符合业务需求、...
微信小程序引用fontawesome字体
yiyingcsdn的博客
05-05 1万+
1.到fontawesome官网下载字体包。 2.打开1中下载的压缩包找到.ttf文件。 3.上传2中的字体文件到https://transfonter.org/，选择base64 编吗 ，convert后下载. 4.打开3中下载的文件，找到stylesheet.css. 5.打开4中的文件，复制里面的代码到微信小程序中的app.wxss中。
【微信小程序】如何引入外部字体样式
'Ablaze 的专栏
04-05 2万+
我引入的字体是 ionicons 字体 Download Zip后打开fonts文件夹，将对应字体的 ttf文件 上传至 https://transfonter.org/ 注意一定要选中 Base64 encode 的TTF格式，Convert 后下载转换后的压缩包，并将其中的 transfonter.org-20180404-162638/stylesheet.css 中的代码复制...
如何在微信小程序内使用外部字体
web全栈开发的博客
05-28 714
通过 font-face 使用外部字体 首先通过 css 引入地址，然后在需要使用该字体时使用定义的 font-family 即可。 @font-face { font-family: "kaiti"; src: url("https://spkf-zsxn-prod.s3.cn-north-1.amazonaws.com.cn/pic/livecenter/kaiti.ttf"); } .test { font-family: "kaiti"; } 这里的 url 要用 CDN.
微信小程序如何引入外部字体库 Iconfont
Provenr的博客
09-22 1万+
1、在 阿里巴巴字体库 选购喜欢的字体并下载压缩文件, 阿里巴巴字体库使用方法 进入阿里巴巴字体官网 注册登录 按照如图所示1、2、3 创建一个项目 在首页选择需要的字体添加到购物车, 在右上角购物车内,将所选图标添加到项目中 在项目中选择 fontclass 获取在线样式地址 也可以直接下载到本地 在本地项目中引入该样式即可使用 标签内直接添加 字体类名和选中的类名 如果选择用在线字体 ，可以
微信小程序引入维吾尔语字体
04-23
微信小程序支持引入自定义字体，包括维吾尔语字体。你可以按照以下步骤来引入维吾尔语字体： 1. 准备字体文件：首先，你需要准备一个包含维吾尔语字体的字体文件（通常是.ttf格式）。你可以从合法渠道获取维吾尔语字体文件，或者使用在线字体转换工具将现有的维吾尔语字体转换为.ttf格式。 2. 添加字体文件：将字体文件添加到小程序的项目目录中，通常是在项目的根目录下创建一个名为"fonts"的文件夹，并将字体文件放置在其中。 3. 在app.json中配置字体：打开app.json文件，在"window"字段下添加一个"font"字段，并设置其值为字体文件的相对路径。例如： ``` "window": { "font": { "url": "/fonts/your-font.ttf" } } ``` 4. 在页面中使用字体：在需要使用维吾尔语字体的页面的json文件中，添加一个"usingComponents"字段，并在其中引入"wxss"文件。例如： ``` "usingComponents": { "your-component": "/path/to/your-component" } ``` 5. 在wxss文件中设置字体样式：在引入的wxss文件中，使用@font-face规则来设置字体样式。例如： ``` @font-face { font-family: 'YourFontName'; src: url('/fonts/your-font.ttf') format('truetype'); } ``` 6. 在页面的wxml文件中使用字体：在需要使用维吾尔语字体的页面的wxml文件中，使用font-family属性来设置字体样式。例如： ``` <view style="font-family: 'YourFontName';">这是一段维吾尔语文本</view> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Dove言和

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值