微信小程序中使用特殊字体

已于 2024-03-07 11:14:01 修改
阅读量883 收藏 9
点赞数 5
分类专栏： 小程序 文章标签： 微信小程序 小程序
于 2024-03-04 17:00:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yaya_xiaohui/article/details/136456412
版权
本文介绍了如何从推荐网站下载字体文件，如ChineseZiti和HelloFont；使用Transfonter网站将字体转换为woff格式；并指导如何在微信小程序中通过CSS和wxss引入自定义字体‘JasonHandwriting7’。
摘要由CSDN通过智能技术生成

1、首先下载字体文件
推荐几个常用下载字体的网站
https://font.chinaz.com/zhongwenziti.html
https://www.hellofont.cn/
2、转换字体
使用下面这个网站进行字体转换
https://transfonter.org/
在这里插入图片描述

  • 点击add fonts 按钮进行上传刚刚下载的字体文件
  • 选择formats格式：可以只选择woff
  • 点击convert进行编译
  • 最后下载文件

3、使用
在这里插入图片描述
打开这个css文件

在这里插入图片描述
复制这样式放到你写的wxss文件中
页面中引入样式

<view style="font-family:'JasonHandwriting7' "></view>
辽辽无期
关注
  • 5
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
在微信小程序使用外部字体
挚友阳光的博客
01-10 3473
小程序引用外包字体包！
微信小程序实现婚礼代码，免费！
06-09
通过熟练掌握微信小程序的开发技术和设计理念，我们可以创造出富有创意的线上婚礼体验，让这个特殊的日子更加难忘。而这一切，得益于微信小程序的开放性和易用性，使得即使是非专业开发者也能尝试制作自己的婚礼小...
微信小程序使用艺术字体（详细过程）
2303_78738507的博客
03-17 656
我们在挑选字体过后，需要获取字体的直接下载链接，就如点击此链接过后，就能够在网页直接下载此字体，如：https://zf.sc.chinaz.com/Files/DownLoad/upload/2024/0201/cangeaiminxingkai.ttf此种链接。
【微信小程序】使用外部字体
Qianmoer的博客
01-26 469
将所有内容复制到app.wxss中,接下来我们就可以在小程序中任意使用我们导入的外部字体了，另外此中方法也适用于阿里巴巴iconfont字体的导入哦，有兴趣的朋友不妨去试试。在修改的过程中又留下了一些什么坑，当然本文并不旨在谈论这些坑和其解决方案，因为太多了，本文的重点是如何在小程序中使用外部字体。微信小程序其实说白了就是一个浏览器，一个基于webkit内核的浏览器，我们浏览特定的小程序其实就是在浏览特定的网页。答案当然是可以的，我们需要借助一个第三方网站。其实对于一般的需求，系统预置的字体已经够用了。
微信小程序Skyline渲染模式下，iconfont字体的使用！
最新发布
yanghongfei110的博客
04-26 337
微信小程序转skyline渲染，iconfont字体失效，不显示问题。
微信小程序在text文本实现多种字体样式
10-16
主要介绍了微信小程序在text文本实现多种字体样式,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
[微信小程序] 微信小程序使用特殊字体
iChangebaobao的博客
02-23 1021
methods: { onLoad() { this.loadFontFace() }, loadFontFace() { wx.loadFontFace({ family: 'Bebas', source: 'url("https://cloud-minapp-37887.cloud.ifanrusercontent.com/1mdOQVZ9eaLtmlUt.ttf")', fail: console.log, .
微信小程序使用特殊字体包
weixin_40362806的博客
08-02 1265
微信小程序使用特殊字体包
微信小程序自定义字体样式、字体修改、第三方字体设置
u014388322的专栏
09-01 7910
本人专注于Android/java/数据库/微信小程序技术领域的开发，以及有好几年的计算机毕业设计方面的实战开发经验和技术积累；尤其是在安卓（Android）的app的开发和微信小程序的开发，很是熟悉和了解；本人也是多年的Android开发人员；希望我发布的此篇文件可以帮助到您；🍅。
微信小程序导入其他字体会不会影响运行_微信小程序是否可以引用特殊字体
weixin_39984105的博客
12-19 176
微信小程序是否可以引用特殊字体可以引用特殊字体。具体的方法如下：方法一： 转base64格式1、下载要使用的字体，建议TTF格式2、打开网站 https://transfonter.org/ 转换格式，得到压缩包3、将压缩包解压后，把stylesheet.css的内容复制到小程序的公共样式，就可以使用了方法二：动态加载网络字体(推荐使用)动态加载网络字体。文件地址需为下载类型。iOS 仅支持 ht...
微信小程序特殊文字透明字工具箱源码程序
05-30
效果预览图：...使用方法： 下载源码导入开发者工具，自行修改代码里的信息 无需后台，所有功能前端内部实现 艺术字、特效字、透明字等特殊文字在线制作小程序源码
微信小程序 setData使用方法及常用错误解决办法
08-30
在微信小程序中，`setData` 是用于更新页面数据的关键方法，它允许开发者将数据从 JavaScript 层传递到 WXML（微信小程序的结构层），从而驱动页面视图的更新。然而，`setData` 在处理数组对象时有一些特殊的规定，...
AXURE 9 微信小程序元件库
06-13
AXURE 9 微信小程序元件库是一款专为原型设计师打造的强大工具，它集成了多种微信小程序的UI元素，使得在设计过程中可以快速构建出逼真的微信小程序原型。这款元件库极大地方便了设计师们的工作，提高了设计效率，...
微信小程序-开发的小说阅读器源代码
05-09
微信小程序是一种轻量级的应用开发平台，主要针对移动端，由腾讯公司推出，旨在提供便捷的、无需下载安装即可使用的应用服务。在这个项目中，我们讨论的是一个基于微信小程序开发的小说阅读器源代码，它实现了小说...
微信小程序text文本样式（1）
m0_72168336的博客
11-29 7516
微信小程序text文本样式
微信小程序：怎么设置字体？
夏天的博客
08-16 1万+
1.小程序设置字体有没有效果呢？ font-family: PingFangSC-Regular, PingFang SC; 如上设置，答案是没有一点效果的。 因为真机调试的时候，手机是不带PingFang 字体的。 2.要怎样设置才能有自己想要的字体？ 设置字体有两种方法，但是最好的方案 是 js动态加载字体，然后页面引用。 js部分在onload中写下 wx.loadFontFace({ family: 'webfont', source: 'url("//
小程序中引用字体
蘅潇嗜玉
08-06 676
外部引入 我选择外部引入是由于小程序包最多2M，字体包一般比较大，所以将字体资源放在阿里云oss上。 特别注意：网络引入需要设置跨域，要不然会引用失败。在阿里云oss基础设置里面可以设置跨域 image.png 1、直接在wxss中引用 @font-face { font-family: 'fangsong'; src: ...
微信小程序--字体展示
热门推荐
include的博客
08-03 3万+
字体一 font-family:‘Courier New’, Courier, monospace; 字体二 font-family:‘Franklin Gothic Medium’, ‘Arial Narrow’, Arial, sans-serif; 字体三 font-family:‘Gill Sans’, ‘Gill Sans MT’, Calibri, ‘Trebuchet MS’, ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值