# web-font-detect

> 检测浏览器支持字体

Latest version **1.0.10** (published 2020-08-31) · MIT license · 0 weekly downloads

## Install

```sh
npm install web-font-detect
pnpm add web-font-detect
yarn add web-font-detect
bun add web-font-detect
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.10 |
| Published | 2020-08-31 |
| First published | 2020-08-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 321 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | liubin |
| Maintainers | iroben |
| Keywords | font-detect |

## Links

- npm: https://www.npmjs.com/package/web-font-detect
- Repository: https://github.com/iroben/font-detect
- Homepage: https://github.com/iroben/font-detect#readme
- Issues: https://github.com/iroben/font-detect/issues
- npm.io page: https://npm.io/package/web-font-detect

## Recent versions

- 1.0.10 (latest) — 2020-08-31
- 1.0.9 — 2020-08-31
- 1.0.8 — 2020-08-31
- 1.0.7 — 2020-08-27
- 1.0.6 — 2020-08-27
- 1.0.5 — 2020-08-27
- 1.0.3 — 2020-08-27
- 1.0.2 — 2020-08-27
- 1.0.1 — 2020-08-27
- 1.0.0 — 2020-08-26

## README

# JavaScript / CSS 字体检测器

参考[fontdetect.js](https://github.com/f2ex/fontdetect.js)修改的，主要是在操作`DOM`的时候，用了文档碎片，和复用`DOM`，减少`reflow`

# 使用

## 安装

```
npm i web-font-detect
```


## 检测一组字体（推荐用）

```
import FontDetect from "web-font-detect";
var fonts = ["PingFang SC", "Hiragino Sans GB", "microsoft yahei"]
var fontDetect = new FontDetect();
fontDetect.promiseDetects(fonts).then(supportFonts=>{
    console.log(supportFonts)
})； // 返回支持的字体
```


## 检测一组字体

```
import FontDetect from "web-font-detect";
var fonts = ["PingFang SC", "Hiragino Sans GB", "microsoft yahei"]
var fontDetect = new FontDetect();
var supportFonts fontDetect.detects(fonts)； // 返回支持的字体
console.log(supportFonts)
```


## 单一检测字体

```
 import FontDetect from "web-font-detect";
 var fontDetect = new FontDetect();
 fontDetect.detect('$fontFamily'); // 返回 boolean值
```

## `promiseDetects`和`detects`区别

`promiseDetects`在浏览器的`requestAnimationFrame`事件中检测字体

## 测试数据和结果（555个字体）,测试6次

`promiseDetects` 平均耗时：`1345`

```
1383.2529296875ms
1265.2841796875ms
1262.455810546875ms
1499.126953125ms
1222.503173828125ms
1443.22900390625ms
```

`detects` 平均耗时：`1364`

```
1424.771240234375ms
1281.14794921875ms
1318.2998046875ms
1360.218017578125ms
1458.3408203125ms
1348.72314453125ms
```


`detect` 平均耗时：`1749`

```
1778.216064453125ms
1742.853271484375ms
1591.015869140625ms
1761.057861328125ms
1766.262939453125ms
1859.827880859375ms
```

---
_Source: https://npm.io/package/web-font-detect · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._