find-font
Detect fonts supported by the system on the client.
Installation
npm install -D find-fontUsage
Please use it in Canvas environment
import { findFont } from 'findFont'
// return false
const isSupport = findFont('AABBCC')Support Mini Program:
import { findFont } from 'findFont'
// https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.createOffscreenCanvas.html
const canvas = wx.createOffscreenCanvas({ type: '2d', width: 100, height: 100 })
const context = canvas.getContext('2d')
findFont('Helvetica', { canvasInstance: canvas, canvasContext2D: context })Direct run in the browser
with the help of tsup, besides supporting ESM and CommonJS, IIFE is also supported, so we can direct run in the browser.
<!-- html file -->
<script src="https://unpkg.com/browse/find-font/dist/index.global.js"></script>
<script>
const { findFont } = __FINDFONT__;
console.log(findFont("Helvetica"), findFont("ABC"));
</script>Principle
Drawing fonts with Canvas:
- use the measureText API to roughly check the width of the font
- Some fonts may be the same width, and then use the getImagedata API to accurately check.