美文网首页技术微信小程序开发
小程序中使用自定义字体

小程序中使用自定义字体

作者: 中華田園雞 | 来源:发表于2019-02-01 13:36 被阅读342次

首先小程序字体文件是无法放在本地的
当你尝试在css中导入本地字体文件时


image.png

控制台中会显示如下图报错


image.png

然后 我们尝试将字体文件放在远程服务器试试


于是将字体文件上传至 阿里云OSS服务


复制url 粘贴

IDE上成功显示字体样式



发现一丝不对劲
控制台显示报错

真机预览试试
真机预览
果然没有生效

难道是后台没有配置oss服务器的域名白名单

登录小程序后台
添加合法域名

域名白名单添加
保存提交
try again↓
还是不行
还是不行 跟之前一样 还是控制台报错VM7333:5 Failed to load font https://surx.oss-cn-beijing.aliyuncs.com/font/Digital2.ttf net::ERR_CACHE_MISS From server 59.110.185.128
IDE显示字体 真机无效

秉着求知的精神
看来是时候祭出杀器


一个会装逼的程序员 必须得会用这个

然后找到了以下两个办法

一、.将图片转换成BASE64

1.首先打开 在线转换工具 https://transfonter.org/
2.然后上传字体文件 image.png
3.转换并下载
4.解压下载的文件

打开文件
stylesheet.css

选中复制
粘贴到wxss里如下图

真机预览试试


搞定!

二、使用wx.loadFontFace(OBJECT)接口

相关文章

  • 微信小程序中自定义字体

    微信小程序支持自定义字体开放出来也有段时间,这边整理下使用自定义字体中,容易忽略的一些问题,和简便的全局自定义方式...

  • UGUI中创建自定义图片字体

    NGUI中,使用自定义字体可以使用font maker,但是UGUI中并没有提供相应工具。UGUI的自定义字体为 ...

  • 微信小程序特殊字体

    微信小程序中如何使用特殊字体 先百度下载要使用的字体 打开网站 https://transfonter.org/红...

  • flutter 使用从网络下载的font

    flutter中文网的文档只有从资源载入自定义字体的办法,要想程序运行时载入自定义路径的字体可以使用FontLoa...

  • Swift自定义字体

    将所用到的字体导入工程Bundle中 在Plist文件中添加以下key和使用到的字体名称 在代码中使用自定义字体

  • 小程序中使用自定义字体

    首先小程序字体文件是无法放在本地的当你尝试在css中导入本地字体文件时 控制台中会显示如下图报错 然后 我们尝试将...

  • iOS在项目中使用自定义字体

    iOS 自定义字体是指,使用自己从外部导入的字体库使用在对应的文本显示中。 一般的iOS自定义的字体库是 .ttf...

  • 让微信小程序使用base64字体图标

    问题: 1.微信小程序不能随意使用网络资源,如字体,css文件等 2.不能在小程序中使用字体文件 3.不能使用ba...

  • fontawesome 图标在微信小程序中使用教程

    fontawesome图标是一套前端使用频繁的icon字体图标库,在微信小程序中同样也可以使用。 1. 下载字体图...

  • Android O:使用自定义字体资源

    前言 Android O中的新功能之一是使用自定义字体资源。在这篇文章中,我们一起来看看如何在我们的应用程序中使用...

网友评论

    本文标题:小程序中使用自定义字体

    本文链接:https://www.haomeiwen.com/subject/wtbrsqtx.html