Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kirklin/unocss-preset-chinese
汉字排版解决方案
https://github.com/kirklin/unocss-preset-chinese
unocss unocss-preset
Last synced: 6 days ago
JSON representation
汉字排版解决方案
- Host: GitHub
- URL: https://github.com/kirklin/unocss-preset-chinese
- Owner: kirklin
- License: mit
- Created: 2023-01-28T09:38:35.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2024-09-11T10:53:43.000Z (about 2 months ago)
- Last Synced: 2024-10-21T21:48:33.329Z (15 days ago)
- Topics: unocss, unocss-preset
- Language: TypeScript
- Homepage: https://unocss-preset-chinese-playground.vercel.app/
- Size: 701 KB
- Stars: 62
- Watchers: 2
- Forks: 1
- Open Issues: 3
-
Metadata Files:
- Readme: README.en.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-unocss - unocss-preset-chinese - Preset for Chinese fonts. (Presets)
- awesome-unocss - unocss-preset-chinese - Preset for Chinese fonts. (Presets)
README
# unocss-preset-chinese
[![CI][ci-image]][ci-url] [![npm][npm-image]][npm-url] [![downloads][downloads-image]][downloads-url] [![javascript_code style][code-style-image]][code-style-url]
[ci-image]: https://github.com/kirklin/unocss-preset-chinese/actions/workflows/release.yml/badge.svg?branch=main
[ci-url]: https://github.com/kirklin/unocss-preset-chinese/actions/workflows/release.yml
[npm-image]: https://img.shields.io/npm/v/unocss-preset-chinese.svg
[npm-url]: https://npmjs.org/package/unocss-preset-chinese
[downloads-image]: https://img.shields.io/npm/dm/unocss-preset-chinese.svg
[downloads-url]: https://npmjs.org/package/unocss-preset-chinese
[code-style-image]: https://img.shields.io/badge/code__style-%40kirklin%2Feslint--config-brightgreen
[code-style-url]: https://github.com/kirklin/eslint-config/
## Introduction
This is a project aimed at optimizing the display of fonts on Chinese websites or applications. By using this project, you can get a default font arrangement scheme to ensure that the selected fonts on your page meet the requirements of Chinese reading when no font is specified. The font arrangement scheme of this project is based on considerations of the Chinese reading experience. It prioritizes the selection of fonts widely used and popular in the Chinese environment and determines the priority order of fonts based on the fonts' supported glyphs, symbols, and cross-platform support.
## Features
- Provides multiple font arrangement schemes to accommodate different types of Chinese characters (simplified or traditional).
- Supports mixed Chinese and English text, effectively avoiding the impact of English fonts on Chinese punctuation marks.
## How to Use
1. Install unocss and unocss-preset-chinese using npm or pnpm:
```bash
npm install unocss unocss-preset-chinese --save-dev
```
2. In your UnoCss configuration file, import unocss-preset-chinese and add it to the presets section:
```ts
// unocss.config.js
import presetChinese from "unocss-preset-chinese";
import { defineConfig, presetUno } from "unocss";
export default defineConfig({
presets: [
presetUno(),
presetChinese({
chineseType: "simplified", // Specify the text as Simplified Chinese
}),
// ...custom presets
],
});
```
## Configuration Options
You can use the following configuration options to customize the font arrangement scheme:
- **extendTheme** (boolean, default: true): Whether to extend the theme object.
- **themeKey** (string, default: "fontFamily"): The key of the theme object.
- **fonts** (Record): Extend fonts, where you can specify different fonts and font weights.
- **chineseType** (ChineseType, default: "simplified"): Type of Chinese, with options "simplified" or "traditional".
- **fallbackFont** (string[] | null): Alternative fonts for Chinese characters.
- **declareEnglishFont** (string[]): Declare fonts for English text.
### Example
Here's an example configuration demonstrating how to use these options to customize the font arrangement scheme:
```typescript
import presetChinese from "unocss-preset-chinese";
import { defineConfig, presetUno } from "unocss";
export default defineConfig({
presets: [
presetUno(),
presetChinese({
extendTheme: false, // Do not extend the theme object
themeKey: "customFontFamily", // Use a custom theme key
chineseType: "traditional", // Specify the text as Traditional Chinese
}),
// ...custom presets
],
});
```
## License
[MIT](./LICENSE) License © 2022-PRESENT [Kirk Lin](https://github.com/kirklin)