Find-font NPM | npm.io

find-font

Detect fonts supported by the system on the client.

Installation

npm install -D find-font

Usage

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.