小程序

使用可爱的字体库

  1. 小程序的根目录中创建一个名为 “assets” 的文件夹

  2. 将下载的字体文件拷贝到此文件夹中

  3. app.json 文件中添加全局字体设置（在 app.json 的 “globalStyle” 中设置 “fontFamily” 为自定义字体名（如 “cute - font”），用于全局默认字体的预配置）

1
如 "globalStyle": { "fontFamily": "cute - font" }

  1. app.wxss 文件中定义字体名称（ @font-face 规则绑定字体名与文件路径，明确 “cute - font” 对应的字体文件位置（/assets/cute - font.ttf），使小程序识别该字体，用于声明字体文件的格式，帮助浏览器 / 小程序引擎更高效地解析字体truetype 对应 .ttf 格式的字体文件

  2. ）

    1
    2
    3
    4
    @font-face {
      font-family: 'cute - font'; /* 自定义字体名称 */
      src: url('/assets/cute-font.ttf') format('truetype'); /* 字体文件路径 */
    }

  3. 在需要使用可爱字体的页面中，在对应的 wxss 文件中使用 font - family 属性来应用字体，

    1
    “.text { font - family: 'cute - font'; }”。

常用的wxss属性

字体大小：font-size: 35rpx;

颜色： color:#5b251f;

图层： z-index: 10;

宽：width: 400rpx;

高：height: 300rpx;

设置页面展示高度：

height: 100vh;

overflow: hidden;

布局：

将父容器设为弹性容器，子元素自动成为 “弹性项”

display: flex

主轴为水平方向

flex-direction: row