如何在微信小程序内使用外部字体

￡神魔★判官ぃ 2022-10-16 07:45 243阅读 0赞

### 通过 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 地址，本地地址无效。

### 通过 wx.loadFontFace 使用外部字体 ###

这里需要在 app.js 中将需要使用的字体引入，然后通过 `font-family` 使用改字体。

wx.loadFontFace({
      family: "Bitstream",
      source:
        'url("https://spkf-zsxn-prod.s3.cn-north-1.amazonaws.com.cn/pic/livecenter/kaiti.ttf")',
      success: (msg) => {
        console.log(msg);
      },
    });

.test {
      font-family: "Bitstream";
    }

# 更多内容 请看前端面试题库 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjk4MTU2MA_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjk4MTU2MA_size_16_color_FFFFFF_t_70]: /images/20221014/1f6cbab149424a1f990045f3d552ba58.png

发表评论取消回复

表情：

评论列表（有 0 条评论，243人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序中使用阿里（iconfont）字体图标

一、下载图标 1、首先在阿里云（iconfont）中找到项目中所需要的图标并且加入到购物车。 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW

落日映苍穹つ/ 2023年06月03日 12:55/ 0 赞/ 49 阅读

相关微信小程序--icon引入外部图标

本博客仅仅只是个意外。大佬请绕道。第一步：搭建框架首先你得有个微信小程序的开发工具，然后把小白架构搭建好。（不会去看[官网][Link 1]）。

￡神魔★判官ぃ/ 2022年12月07日 15:30/ 0 赞/ 359 阅读

相关微信小程序如何引入iconfont图标字体库

我选择引入字体图标库的原因是加载图片会影响小程序页面的打开速度第一步：去[阿里巴巴][Link 1]的图标库找到你喜欢的图标加入购物车添加到你创建的项目 !

待我称王封你为后i/ 2022年12月06日 01:14/ 0 赞/ 240 阅读

相关如何在微信小程序内使用外部字体

通过 font-face 使用外部字体首先通过 css 引入地址，然后在需要使用该字体时使用定义的 `font-family` 即可。 @font-fa

￡神魔★判官ぃ/ 2022年10月16日 07:45/ 0 赞/ 244 阅读

相关【Web技术】1033- 如何优雅的在微信小程序使用 SVG 字体图标

![e8681ddcae76ecbffc901b95db734edc.png][] > 本文思路来自实际项目的重构总结，欢迎纠正和交流。如果对你有帮助，还请点赞????收藏支

Bertha 。/ 2022年09月02日 04:05/ 0 赞/ 222 阅读

相关【微信小程序】如何引入外部字体样式

我引入的字体是 [ionicons 字体][ionicons] ![这里写图片描述][70] Download Zip后打开fonts文件夹，将对应字体的 ttf文件

小灰灰/ 2022年05月28日 12:22/ 0 赞/ 287 阅读

相关 14.微信小程序之如何引入外部字体

最近是有个需求要在canvas上使用外部字体，但是没有没有找到方法。找到了在wxml页面上的办法，好像小程序上并没有开放在canvas上使用外部字体吧，啊哈哈哈万一有就是啪啪啪

亦凉/ 2022年04月12日 02:28/ 0 赞/ 466 阅读

相关微信小程序使用字体图标 iconfont

第一步：在阿里巴巴矢量图标库下载需要的图标地址：https://www.iconfont.cn/ 添加至项目 ![1073044-20190531135120

- 日理万妓/ 2021年12月24日 15:41/ 0 赞/ 466 阅读

相关微信小程序引入外部网页

![20181223230203760.jpg][] 承接微信小程序开发。扫码加微信。微信小程序开发交流qq群 581478349 ；小程序

你的名字/ 2021年09月30日 03:34/ 0 赞/ 465 阅读

相关微信小程序 - 字体图标的使用（详细介绍）

今天，在开发一个项目的时候，想要使用字体图标，减少项目的大小，然后自己下载好自己选的图标，引入使用的时候发现一直不行，经过多次百度搜索总结之后终于可以正常使用。这里介绍两个

太过爱你忘了你带给我的痛/ 2021年08月28日 15:35/ 0 赞/ 838 阅读