微信小程序：外部字体引用以及遇到的一些问题（字体图标/字体文件）

前言

设计稿中，有用到手机未内置的第三方字体。如何在微信小程序中使用呢？

开始

触类旁通，小程序的wxss语法与css是一致的。我们首先想到的是@font-face{}。没错，它就是今天的主角~

在正式开始之前，我们先来看看两个常见的概念：

字体文件：引用该类型文件，控制文字的显示形态。
字体图标：使用字体代替图标显示。

一开始，参照网上的方法，将对应的字体文件，上传到https://transfonter.org/，通过转换成base64编码，在wxss文件中使用。

（注意：@font-face{ src: url(不支持相对路径的引用); }）

转换后的样式文件特别大，接近10M。完全不能接受的处理方式，于是开始使用绝对路径，将字体文件上传至服务器。（PS：其实一开始这种做法就是错误的，转base64适合字体图标(如：iconfont)的转换，文件相对较小。而我的需求是字体文件，不是字体图标。）

实践

参考，参考，不会的时候看看别人类似的是怎么实现的。这里参考的是有赞Vant的cell组件。既然是开源的，那我们可以轻松查看它的实现。

cell组件.wxss的部分代码：

cell的wxss

虽然它使用的是字体图标，但是它的字体文件没有转换为base64编码，而是放在了服务器，通过url地址去请求的。这点和我的需求是一致的~

问题

既然如此，那么在自己的项目中，引入服务器中的字体就OK了呀~

wxml:

<view class="test">字体测试</view>
<view class="icon van-icon van-icon van-icon-upgrade van-icon-upgrade" style="font-size: 32rpx;"></view>

wxss:

@font-face {
    font-family:'youth';
    src:url('https://***/***/***/youth.TTF') format('truetype');
}
@font-face {
    font-family:'vant-icon';
    src:url('https://img.yzcdn.cn/vant/vant-icon-76f274.ttf') format('truetype');
}
.van-icon {
    position:relative;
    display:inline-block;
    font:normal normal normal 14px/1 vant-icon;
    font-size:inherit;
    text-rendering:auto;
}
.van-icon-upgrade::before {
    content:"\F058";
}
.test {
    font-size:50px;
    font-family:'youth';
}

先来看看看效果：

没有生效