相关问题：小程序使用特殊艺术字体包

1、本地引入base64格式css字体包（适用于较少特殊文字，且后期特殊文字较少维护更新）

举例：要实现以下红色区域框特殊字体效果

本地字体包解决方案：

字体包格式在线转换链接：transfonter.org/

(1). 将设计给到的ttf格式字体包按需求文字转化为base64格式

(2).页面引入使用即可

<style>
@import url('../../static/css/font-oncePop.css');

.success_btn{
    background: url('../../static/img/once_btn.webp') no-repeat center center;
    width: 520rpx;
    height: 116rpx;
    background-size: 100% 100%;
    text-align: center;
    color: #FFFFFF;
    margin: 0 auto;
    font-family: 'YouSheBiaoTiYuan';
    font-size: 50rpx;
}
</style>

至此：使用base64本地字体包就设置完成了

2、使用线上字体包(适用于特殊文案不确定，后期需要更新的情况)

问题：小程序分包单包大小为2M，在不确定文案的情况下直接使用ttf转成base64格式的css文件会出现超包的情况，这时候只能使用线上字体包文件来实现效果。

案例：这里以常用汉字+特殊符号+英文字母+阿拉伯数字实现效果

(1).这里将常用汉字、特殊符号、英文字母等拆分成多个字体包，并上传到服务器（可能会出现字体包跨域问题，需要后端配置下）

tips:具体字体包上传、处理、下载参考上方【1-(1)】方法

(2).配置字体包css文件

@font-face {
	font-family: "alimama1";
	font-weight: 400;
	src: 
		url("https://****************.com/90186e24-feb0-4bf6-94a2-0a71645a0427.woff2") format("woff2"),
		url("https://****************.com/JT1GDOKpPMIP.woff") format("woff");
	font-display: swap;
}

@font-face {
	font-family: "alimama2";
	font-weight: 400;
	src: 
		url("https://****************.com/ff8a124a-8bf5-4f6e-8488-f91bd054c280.woff2") format("woff2"),
		url("https://****************.com/0b5b9303-fea7-4a8e-b6c5-bb4027ceef1b.woff") format("woff");
	font-display: swap;
}

@font-face {
	font-family: "alimama3";
	font-weight: 400;
	src: 
		url("https://****************.com/e44c81b6-8142-45e2-9517-84279f5f2714.woff2") format("woff2"),
		url("https://****************.com/b8ba8765-9d91-4e8f-9bea-484e98380cfc.woff") format("woff");
	font-display: swap;
}

(3).引入fontStyle.css文件，使用即可

@import url("../css/fontStyle.css");
.edit_txt{
    font-size: 30rpx;
    color: black;
    text-align: center;
    font-weight: bold;
    font-family: 'alimama,alimama2,alimama3';
}

注意注意注意！！！！

(4).这时候配置和引入使用都完成了，编辑器也生效了。但是会出现IOS设备有效果，安卓设备没效果的情况。

安卓设备解决字体加载不成功问题

在看官网有句解释：字体链接必须是同源下的，或开启了cors支持，推测应该是同源策略的问题，需要让后台去服务器配置nginx。

location ~* \.(eot|ttf|woff|woff2|svg)$ {
    add_header Access-Control-Allow-Origin *;
}

至此：抖音小程序配置及使用线上字体包完成了效果展示

抖音小程序使用特殊字体包完整处理方法