字体压缩 - -「前端设计」fontSpider 字蛛的使用

// 宝塔 网站 配置文件 添加内容
// 宝塔 nginx 配置文件  server内 添加内容
location ~ .*\.(eot|otf|ttf|woff|woff2|svg)$
{
    add header Access-Control-Allow-Origin *;
}
// 确认字体文件链接可以从浏览器下载 

// 小程序在微信公众平台添加微信域名 https://servicewechat.com

// 新增：加载自定义字体
<template>
  <view class="container">
    <canvas 
      type="2d"
      id="posterCanvas"
      class="canvas"
      style="width: 300px; height: 300px;"
    ></canvas>
    <button @click="drawPoster">绘制海报</button>
  </view>
</template>

<script setup>
import { ref, onMounted, nextTick, getCurrentInstance } from 'vue'

// 1. 获取当前页面的Vue实例（核心：替代uni.getCurrentPages）
const instance = getCurrentInstance()
// proxy是Vue实例的代理对象（uniapp中必须用proxy才能拿到正确的上下文）
const pageProxy = instance.proxy

// 自定义字体名称
const fontFamily = 'SweiSpringCJKsc-Bold'
const fontUrl = 'https://域名/SweiSpringCJKsc-Bold.woff'
let canvasCtx = null
let canvas = null

/**
 * 加载自定义字体（逻辑不变）
 */
const loadCustomFont = () => {
  return new Promise((resolve, reject) => {
    uni.loadFontFace({
      family: fontFamily,
      source: `url("${fontUrl}")`,
      global: true,
      success: (res) => resolve(res),
      fail: (err) => reject(new Error('字体加载失败：' + err.errMsg))
    })
  })
}

/**
 * 初始化Canvas（改用getCurrentInstance的实例）
 */
const initCanvas = async () => {
  // 关键：用Vue实例指定选择器作用域，替代uni.getCurrentPages()[0]
  const query = uni.createSelectorQuery().in(pageProxy)
  query.select('#posterCanvas')
    .fields({ node: true, size: true })
    .exec(async (res) => {
      if (!res[0]) {
        console.error('未找到canvas节点')
        return
      }
      canvas = res[0].node
      // 适配设备像素比，避免模糊
      const dpr = uni.getSystemInfoSync().pixelRatio
      canvas.width = 300 * dpr
      canvas.height = 300 * dpr
      canvasCtx = canvas.getContext('2d')
      canvasCtx.scale(dpr, dpr)
    })
}

/**
 * 绘制海报（逻辑不变，保证字体加载完成后执行）
 */
const drawPoster = async () => {
  try {
    await loadCustomFont()
    if (!canvasCtx) {
      await initCanvas()
      // nextTick确保DOM完全渲染（比setTimeout更优雅）
      await nextTick()
    }
    
    // 清空画布
    canvasCtx.clearRect(0, 0, canvas.width, canvas.height)
    
    // 绘制自定义字体文字
    canvasCtx.fillStyle = '#333'
    canvasCtx.font = `24px ${fontFamily}` // 必须匹配字体名
    canvasCtx.textAlign = 'center'
    canvasCtx.textBaseline = 'middle'
    canvasCtx.fillText('测试自定义字体生效', 150, 150)
    
    console.log('海报绘制完成')
  } catch (err) {
    console.error('绘制失败：', err)
    // 兜底逻辑
    if (canvasCtx) {
      canvasCtx.clearRect(0, 0, canvas.width, canvas.height)
      canvasCtx.font = '24px bold'
      canvasCtx.fillText('测试自定义字体（兜底）', 150, 150)
    }
  }
}

// 页面挂载时初始化（nextTick确保DOM加载完成）
onMounted(async () => {
  await nextTick()
  initCanvas()
})
</script>

<style scoped>
.container {
  padding: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.canvas {
  border: 1px solid #eee;
  margin-bottom: 20rpx;
}
</style>