# vue-typeface

> 好用的艺术字体压缩、提取工具

Latest version **1.0.4** (published 2023-02-02) · ISC license · 0 weekly downloads

## Install

```sh
npm install vue-typeface
pnpm add vue-typeface
yarn add vue-typeface
bun add vue-typeface
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2023-02-02 |
| First published | 2023-02-01 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 193.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | chan waidung |
| Maintainers | chanwaidung |
| Keywords | 字体压缩, 字体提取, 优化, font, ttf, woff, otf |

## Links

- npm: https://www.npmjs.com/package/vue-typeface
- Repository: https://github.com/chanwaidung/vue-typeface
- Homepage: https://github.com/chanwaidung/tiny-font#readme
- Issues: https://github.com/chanwaidung/tiny-font/issues
- npm.io page: https://npm.io/package/vue-typeface

## Dependencies (1)

- [fontmin](https://npm.io/package/fontmin.md) ^0.9.9

## Alternatives

- [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) — 2.2M weekly downloads
- [roboto-fontface](https://npm.io/package/roboto-fontface.md) — 196.0K weekly downloads
- [@react-native-vector-icons/common](https://npm.io/package/@react-native-vector-icons/common.md) — 150.4K weekly downloads
- [stockfish](https://npm.io/package/stockfish.md) — 27.0K weekly downloads
- [@procore/core-icons](https://npm.io/package/@procore/core-icons.md) — 4.6K weekly downloads

## Recent versions

- 1.0.4 (latest) — 2023-02-02
- 1.0.3 — 2023-02-02
- 1.0.2 — 2023-02-01
- 1.0.1 — 2023-02-01
- 1.0.0 — 2023-02-01

## README

# 关于

当我们使用一些艺术字的时候，这些艺术字可能会占据很大的体积，导致我们的站点首屏加载
速度过慢。

这个工具会帮助在开发的时候将用到的字体抽离出来，达到减少字体体积的效果。

# 😃  安装

```shell
npm i vue-typeface -D
```

# 🙈  配置vue-typeface/chinese-loader

打开文件```vue.config.js```，将以下代码添加至loader中。

默认情况下这个工具将会提取中文字符到```output/symbol.json```中。

```js
module.exports = {
    chainWebpack: config => {
        config.module
            .rule('vue')
            .test(/\.vue$/)
            .use('vue-typeface/chinese-loader')
            .loader('vue-typeface/chinese-loader')
            .end()
    }
}
```

# 🍔  vue-typeface/chinese-loader的可选入参

这个loader允许你传入一个Object型参数，用来控制一些基础功能：

```javascript
module.exports = {
    chainWebpack: config => {
        config.module
            .rule('vue')
            .test(/\.vue$/)
            .use('vue-typeface/chinese-loader')
            .tap((option)=> {
                return {
                    output: path.resolve('./output'),
                    filename: 'symbol.json',
                    express: /[\u4E00-\u9FA5\uF900-\uFA2D]/g,
                }
            })
            .loader('vue-typeface/chinese-loader')
            .end()
    }
}
```

### option.output

设置目标文件的输出路径

### option.filename

设置目标文件的输出名

### option.express

自定义正则表达式，以筛选文字

# ⚽  配置vue-typeface/font-plugin

打开文件```vue.config.js```，将以下代码添加至plugins配置中。

默认情况下这个工具将会使用```output/symbol.json```文件作为字符集。默认输出至
```output/```文件夹下。

```javascript
const FontPlugin = require('vue-typeface/font-plugin')
module.exports = {
    configureWebpack: {
        plugins: [
            new FontPlugin(),
        ]
    }
}
```

# 🚀  vue-typeface/font-plugin的可选入参

这个plugin允许你传入一个Object型参数，以实现一些基础功能：

```javascript
const FontPlugin = require('vue-typeface/font-plugin')
module.exports = {
    configureWebpack: {
        plugins: [
            new FontPlugin({
                originFontPath: path.resolve('./font/Muyao-Softbrush-2.ttf'),
                symbolPath: path.resolve('./output/symbol.json'),
                outputFontPath: path.resolve('./output')
            }),
        ]
    }
}
```

### option.originFontPath

设置原始字体路径。

### option.symbolPath

设置字符集合

### option.outputFontPath

设置压缩字体文件输出路径

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