前言
有时候因项目需求,可能需要一套第三方艺术字体,就像如图所示效果(店内自取 / 外卖):
实现
当然,也可以直接使用微信 API
wx.loadFontFace
,具体请查看 官方示例文档。
- 引入一套第三方字体(我这里只提供如上图所示的第三方字体),网上很多字体库。
- 在
CSS
文件中写入自定义字体样式。 - 调用。
具体演示代码:
<view class="main-title">店内自取</view>
/* 字体封装 */
@font-face {
font-family: "blod";
src: url('https://static.heytea.com/taro_trial/v1/font/WenYue-XinQingNianTi-NC-W8_1.otf');
}
/* END */
/* 使用 */
.main-title {
font-family: 'blod';
font-size: 55rpx;
padding-bottom: 20rpx;
}
/* END */