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

亦凉 2022-04-12 02:28 485阅读 0赞

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

先看个效果图，我引入的是一种叫五线谱字符的，它可以把数字、字母转换成五线谱？看图就是这种效果啦。你可以引入任何一种你喜欢的字体样式，在网上下载字体包如ttf、eot、svg、woff随便一种格式文件，我下载的是ttf格式的。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbnppbmE_size_16_color_FFFFFF_t_70][]

将字体文件ttf上传到文字转换网站[  https://transfonter.org/][https_transfonter.org]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbnppbmE_size_16_color_FFFFFF_t_70 1][]

转换后下载的文件有这些

![20181130145342302.png][]

将stylesheet.css的内容复制到如这中

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbnppbmE_size_16_color_FFFFFF_t_70 2][]

在需要的页面wxss进行引入

@import "../../style/font.wxss";
    .font{
      font-family: 'akvo';
    }

wxml

<view>音乐字符</view>
    <view>我是正常：123456789</view>
    <view class='font'>我是音乐字符：123456789</view>
    <view>我是正常：abcdefghijklmmopojkj</view>
    <view class='font'>我是音乐字符：abcdefghijklmmjkj</view>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbnppbmE_size_16_color_FFFFFF_t_70]: /images/20220412/db7b217066e749f3a7aada616e713427.png
[https_transfonter.org]: https://transfonter.org/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbnppbmE_size_16_color_FFFFFF_t_70 1]: /images/20220412/cd33193c3350403eb426a82c27d3d6bb.png
[20181130145342302.png]: /images/20220412/7aea02ed93674d6bb63ddb6f57d4022c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbnppbmE_size_16_color_FFFFFF_t_70 2]: /images/20220412/45f7e4f2c7f34ded88bec5e82086741e.png