微信小程序自定义字体及自定义图标问题说明

自定义图标及自定义字体,一直是很多小程序开发者的心病,其实本站是很多解决方案的,为了集中起来,方便直接跳过此坑,我特别做了这次针对字体及字体图标的跳坑;

相关文章:
微信小程序添加并使用外部字体(成功添加到维吾尔语了...
新手跳坑指南《六十七》字体文件无法找到报404错误
在微信小程序中使用字体图标/自定义字体/外部字体

相关插件:
微信小程序实用组件:使用font-awesome字体,真机可用
微信小程序demo:bootstrap字体样式使用

相关帖子:
小程序里面能用阿里字体图标吗
微信小程序中怎么使用字体图标

相关讨论:
Q:小程序开发时能否使用我们自定义的字体图标。
A:自定义字体是支持的,但是需要使用线上字体,并且存放字体的服务器需要允许跨域。

相关讨论一:
字体文件无法加载,确认文件是存在的

@font-face {
  font-family: 'Glyphicons Halflings';

  src: url('/assets/fonts/glyphicons-halflings-regular.eot');
  src: url('/assets/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('/assets/fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('/assets/fonts/glyphicons-halflings-regular.woff') format('woff'), url('/assets/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('/assets/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

控制台报错

VM884:2 Failed to load font http://1701630871.debug.open.wei ... flings-regular.woff : the server responded with a status of 404 (HTTP/1.1 404 Not Found)
From server 127.0.0.1

文件确实存在的,其他jpg/png图片文件都没问题
是bug,还是限制了这些文件类型?

字体文件要放在网络上请求。

相关讨论二:
小程序使用字体图标的方法分享:原文链接
一、先到阿里巴巴矢量图标库(http://iconfont.cn/)生成自己的字体图标,并下载下来,找到ttf格式文件
图片描述
二、到这个平台https://transfonter.org/,把字体文件转化成base64格式
图片描述
三、在wxss文件中引入
图片描述
图片描述

四、在wxml加入字体
图片描述
五、显示效果
图片描述

相关讨论二:
直接引用不行,本地远程的都不行
图片描述

相关讨论三:input更改字体无效第一个是textarea 第二个是input 第三个是text 用的是缅文, 已经在app.wxss设置了@font-face 结果发现input无法设置字体

input 组件是一个 native 组件,字体是系统字体,所以无法设置 font-family;

官方文档有说明

相关讨论四:
小程序里使用 iconfont,font-face的src能使用网络地址吗?

@font-face {
   font-family: 'fontello';
   src: url('http://cdn.example.com/iconfont.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;
   line-height: 1;
}

发现src如果用网络地址就不能在iOS上显示,Android和开发工具上是可以的。src用base64值则都是可以显示的。

iOS要使用https的连接的

相关讨论五:
小程序可以使用font-awesome来做icon么?能不能用icon-font来做icon,如果不能话有什么好的方案来做icon?

可以, 字体放入到服务器, 远程地址引用就可以了, 例如:

@font-face {font-family: "iconfont";
  src: url('//at.alicdn.com/t/xxx.eot?t=1482899691162'); /* IE9*/
  src: url('//at.alicdn.com/t/xxx.eot?t=1482899691162#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('//at.alicdn.com/t/xxx.woff?t=1482899691162') format('woff'), /* chrome, firefox */
  url('//at.alicdn.com/t/xxx.ttf?t=1482899691162') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('//at.alicdn.com/xxx.svg?t=1482899691162#iconfont') format('svg'); /* iOS 4.1- */
}

微信小程序开发联盟
微信小程序开发者
1 篇内容引用
199 声望
68 粉丝
0 条评论
推荐阅读
微信小程序中使用emoji表情相关
本帖将聚合一些跟emoji表情有关的知识;相关文章:“i爱记账” 小程序后端开发小结第7条经验前端传过来的昵称和备注信息一定要经过严格的正则表达式过滤,放置出现XSS等攻击,另外emoji字体表情库应该使用base64_en...

chuxue20052阅读 20.5k

微信小程序开发--个性化头像生成(国庆渐变头像、圣诞帽头像)
今年国庆 渐变头像着实火了一把,看到微信里面的好友,很多都换上了新颜。 如上图所示,一个渐变的头像。作为码农,看到上面的效果,首先会想到这个是怎么实现的?我可不可以?于是就有了今天这篇文章,记录一下...

caiandroidDev阅读 1.9k

微信小程序-获取用户头像信息以及修改用户头像
这里主要用到button的open-type功能,官网已有说明:给button设置open-type="chooseAvatar",来使bindchooseavatar方法生效,在bindchooseavatar指定的函数中获取用户的头像信息

兔子先森阅读 549

微信小程序数字转中文wxs
场景: 传入数字,转换成天数,比如:index = 1 转换后则为 一,在页面中的应用就是<view>第{{index}}天</view>,转为第几天。

兔子先森阅读 466

创建好的小程序如何正式发布?
前置准备:一个待发布的小程序。具体步骤:Editor 中点击 Publish创建新的试用小程序已有试用小程序轮转绑定进入 User CMS 完成认证个人认证企业认证完善小程序信息提交审核发布上线Editor 中点击 Publish创建新的...

Towify阅读 448

封面图
微信小程序分类菜单激活状态跟随列表滚动自动切换
这里主要用到微信小程序提供的SelectorQuery获取页面节点信息实现,组件用的是微信小程序的scroll-view逻辑就是获取右侧盒子的节点信息,获取右侧子分类的节点信息,当子分类滑动到顶部的之后,则切换左侧分类状...

兔子先森阅读 428

微信小程序项目中使用icon图标
效果:步骤:1、先让ui负责人把你的账号加入到项目中,加入到项目中后就可以在icon图标库中看到该项目2、在小程序中使用新建一个view,在上面加一个class,复制icon名字上去即可,注意格式,格式为iconfont icon名。

兔子先森阅读 424

199 声望
68 粉丝
宣传栏