在微信小程序中使用自定义字体【font-family】、同时在canvas

已于 2022-03-22 10:06:47 修改
阅读量2.6k 收藏 5
点赞数 2
分类专栏： 微信小程序 文章标签： 微信小程序 css html
于 2022-03-15 20:46:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45301392/article/details/123510382
版权

一、本地准备字体文件

例如 otf文件
在这里插入图片描述

二、上传通过网站转换成base64格式 css文件

网站传送门：https://transfonter.org/

在这里插入图片描述
在这里插入图片描述

用法如下
在这里插入图片描述

三、在【app.wxss】文件中引入

在这里插入图片描述

四、遇到的问题

想在文件 canvas 中使用的话，必须在当前的文件中引入一次，才可以使用；
在这里插入图片描述

参考链接：https://www.deanhan.cn/wx-app-add-fonts.html

X.Py
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
uniapp小程序通过canvas给图片叠加自定义文字
_小郑有点困了的博客
12-28 2993
本想试试项目的图片是否可以，但是似乎是不行的，测试使用static目录下的某张图片，但是图片是加载失败的，可能是方式不对。创建canvas，绑定上一步的临时路径，就已经可以看到canvas画出来的图片上面有文字了。提到的前端给图片叠加文字水印的操作。比如想要一张照片上，叠加上自定义的文字。,把在线图片加载出来，拿到临时路径。
小程序canvas 2d 自定义字体
caihuawei123的博客
03-11 3381
开发工具：微信开发者工具 Stable 1.05.21020210 注意：目前canvas 2d 开发工具看不到效果，需要真机预览才可以看到效果 效果图： 下面是动态加载网络字体的api: 写的是一个全局加载的 // app.js App({ onLaunch() { //加载全局字体 for(let i =0;i<this.globalData.array.length;i++){ console.log(i) let obj = this
uniapp开发微信小程序设置字体踩坑记录
ㄏ、Forgetˊ的博客
11-30 5642
最近接到一个需求，需要在微信小程序中做出用户可自定义缩放旋转图片和文字的定制功能，开发使用uni-app，这里记录几个问题。 一、canvas设置字体大小需数值需为整数 使用canvas渲染文字时，需要设置文字的字体 let ctx = uni.createCanvasContext('canvas') ctx.font = '16px Arial' // 设置成功 ctx.font = '16.66px Arial' // 这样写会触发警告，不生效 二、字体集font-family兼容的问题 微信小程序
解决js+canvas使用ttf格式字体，首次加载不生效。
是秃子总会发光
09-07 1011
解决js+canvas使用ttf格式字体，首次加载不生效。
小程序 CanvasContext 字体大小设置不了的原因及解决方法
最新发布
m0_67219457的博客
06-27 661
小程序 CanvasContext 字体大小设置不了的原因及解决方法
【教程】微信小程序导入外部字体详细流程
WHY的博客
09-18 4363
本文介绍了如何在微信小程序中导入外部字体，包括字体导入API的使用以及字体资源在服务器上的部署和访问等内容
软件测试最全微信小程序css篇----字体(Font)_小程序font-family(1)，前方高能
m0_55004058的博客
05-13 620
可设置的属性是（按顺序）： “font-style font-variant font-weight font-size/line-height font-family”.font-size和font-family的值是必需的。ultra-condensed：比正常文字宽度窄4个基数。extra-condensed：比正常文字宽度窄3个基数。semi-condensed：比正常文字宽度窄1个基数。extra-expanded：比正常文字宽度宽3个基数。semi-expanded：比正常文字宽度宽1个基数。
小程序设置字体font-family
等，你的到来。
02-21 2010
小程序设置字体font-family，wx.loadFontFace网络资源
微信小程序自定义字体样式、字体修改、第三方字体设置
u014388322的专栏
09-01 8817
本人专注于Android/java/数据库/微信小程序技术领域的开发，以及有好几年的计算机毕业设计方面的实战开发经验和技术积累；尤其是在安卓（Android）的app的开发和微信小程序的开发，很是熟悉和了解；本人也是多年的Android开发人员；希望我发布的此篇文件可以帮助到您；🍅。
【微信小程序】上传字体文件自定义字体family
weixin_52921408的博客
02-12 4992
在小程序开发中 经常需要我们自定义字体样式，我们可以通过一些试题库网站下载字体文件最好是T T F格式的文件，然后我们把这些文件上传到微信的数据库(需要先开通云开发） 然后调用这些文件来达到自定义字体family的目的。
【微信小程序】使用自定义字体
要加油
09-02 7281
微信小程序使用自定义字体 文章目录微信小程序使用自定义字体1. 微信小程序默认支持的字体2. 自定义字体获取3. 文字提取和字体ttf文件压缩4. 字体ttf文件转Base64格式 1. 微信小程序默认支持的字体 在小程序的.wxss 中对字体进行样式定义，如 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, ans-serif ; 显示效果如下图： 但是由于微信支持的字体非常有限，不能满足个性化的需求，因此在开发的过程中可能会需要使用自定义字体。 小程
微信小程序使用自定义字体
thankseveryday的专栏
12-31 988
1. 准备好自己要用的字体 2. 转换字体文件 转换网站：https://transfonter.org/ 如图：先上传字体，勾选（仅这两项），最后转换 3. 下载并复制css 解压下载的文件，并打开stylesheet.css文件 复制到小程序项目的 app.wxss 三步，很简单！ ...
canvasFont:画布的可自定义动画字体
05-12
canvas字体 吉里斯·布德瓦尼（Girish Budhwani） canvasFont是画布的可自定义字体。 它可以像其他任何字体一样使用，但具有许多额外功能。 在查看演示。 版本： 0.0.1 压缩的： 15kb 未压缩： 39kb 基本用法 包括canvasFont.js [removed][removed] 初始化并创建 // Font is a global variable // pass the canvas 2d context. let's say you have stored the context in ctx variable Font . initConfig ( { context : ctx } ) ; // create font by passing x, y coordinates, f
在webstorm开发微信小程序之使用阿里自定义字体图标的方法
10-17
主要介绍了在webstorm开发微信小程序之使用阿里自定义字体图标 的相关资料,需要的朋友可以参考下
详解微信小程序-canvas绘制文字实现自动换行
10-17
主要介绍了微信小程序canvas绘制文字实现自动换行，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
canvas使用外部字体
04-06
你可以通过CSS的`@font-face`规则将字体文件（如Inconsolata.ttf）引入到页面中，然后在Canvas中设置文本样式时引用这个自定义字体。例如： ```css @font-face { font-family: 'Inconsolata'; src: url('...
wxml2canvas微信根据wxml绘制海报
03-18
##根据wx.createSelectorQuery()获取wxml的'color','font-size','font-weight','font-family','backgroundColor','border','border-radius','box-sizing','line-height'属性绘制海报。 ##可以设置 1.data-index设置...
微信小程序使用自定义字体的三种方法
热门推荐
weixin_34332905的博客
05-06 2万+
一、loadFontFace接口 小程序官方提供的接口，最便捷的加载字体的方法，不过限制颇多。必须https且同源，canvas等原生组件不支持。注意！！使用本地文件无效，必须使用网络地址。 官方文档 演示代码： wx.loadFontFace({ family: 'FZSuXSLSJW', source: 'url("https://we7.stuyun.com/FZSuXSLSJW.t...
微信小程序canvas type=2d生成海报保存到相册、文字换行溢出显示...、文字删除线、分享面板
D_evin_的博客
08-21 2067
做个简单的生成二维码海报分享，我做的时候也找简单的方法看能不能实现页面直接截图那种生成图片，原生小程序不支持，不多介绍下面有全部代码有注释、参数自行替换运行看看，还有需要优化的地方，有问题可以咨询我，我写的已经上线
我在canvas设置字体的font-family无效
06-08
在 Canvas 中设置字体的 font-family 属性时，需要注意以下几点： 1. 确保字体文件已成功加载：可以通过在控制台中输出 FontFaceSet 对象的 ready 属性来检查字体是否加载成功。 2. 确保字体名称正确：在 Canvas 中设置字体时，需要使用字体文件中的名称，而不是字体在系统中的名称。可以使用字体文件查看器确定字体名称。 3. 确保字体格式支持：Canvas 支持的字体格式有 TTF、OTF、WOFF、WOFF2 等。如果使用其他格式的字体文件，可能会导致字体设置无效。 4. 确保 Canvas 宽高足够：如果设置的字体太大，可能会导致 Canvas 宽高不足以容纳字体，从而导致字体无法显示。可以尝试增加 Canvas 的宽高或缩小字体大小。 下面是一个设置 Canvas 字体的示例代码： ```javascript const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); // 等待字体加载完成 document.fonts.ready.then(() => { // 设置字体 const font = new FontFace('CustomFont', 'url(path/to/font.ttf)'); font.load().then(() => { ctx.font = '24px CustomFont'; // 设置字体大小和名称 ctx.fillText('Hello World!', 10, 50); // 绘制文本 }); }); ``` 希望这些解决方案可以帮助您解决问题。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值