Taro 4 + weapp-tailwindcss 4 下，微信小程序加载自定义字体

[Fiber-Man]

迟到的作业！

感谢 @sonofmagic 的辛苦付出，让我们能在小程序上幸福的使用 tailwindcss 进行开发！

起因是在小程序中希望加载自定义字体，前前后后折腾了半天（半天>=1天多）也没搞定，于是向 @sonofmagic 请教，目的是希望了解一下 weapp-tailwindcss 是否支持自定义字体，然后再倒腾。事后知道他当时在开会，开完会回复我的时候，我恰巧解决了，在 @sonofmagic 的建议下，来发此文，如果大家有同样的需求，希望能帮大家节约时间，避免“无效”工作。

1. tailwindcss 加载自定义字体
   参考：https://tailwindcss.com/docs/font-family

在 app.css 中加入代码( url 替换自己服务器地址)

@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url("https://url/ChillJinshuSongBold.otf") format("opentype");
}


@theme {
  --font-display: "Oswald";
}

2. 在代码中直接引用自定义字体

<div class="font-display">
自定义字体了
</div>

3. 按说这样就好了
   但是，就是不行。

4. 折腾...

• Taro.loadFontFace？
• 其他字体类型？
• ... ...

6. 自然而然认为是 weapp-tailwindcss 是不是没有适配 tailwindcss，又或字体是 opentype 不支持？
7. 各种对比测试，找来找去，最后发现是微信小程序有特别tips
   参考：https://developers.weixin.qq.com/miniprogram/dev/api/ui/font/wx.loadFontFace.html

8. 服务端用的是caddy，自动支持https，在配置中增加支持字体的 Content-Type 就可以。

   header /fonts/*.woff Content-Type "font/woff"
   header /fonts/*.woff2 Content-Type "font/woff2"
   header /fonts/*.ttf Content-Type "application/x-font-ttf"
   header /fonts/*.otf Content-Type "font/otf"
   header /fonts/*.svg Content-Type "image/svg+xml"

就这么简单！

再次感谢 @sonofmagic 让大家开发小程序能用上 tailwindcss !!!

[sonofmagic]

非常棒，感谢，我维护到官方文档里，并把 link 链接过来