Awesome
unocss-preset-chinese
<div align='center'> <a href="README.en.md">English</a> | <b>简体中文</b> </div>简介
这是一个旨在优化中文网站或应用程序字体显示的项目。 通过使用这个项目,您可以获得一个默认的字体排列方案,以确保在没有指定字体的情况下,页面中选择的字体尽可能符合中文阅读的要求。 这个项目的字体排列方案是基于中文阅读体验的考虑,它优先选择在中文环境中广泛使用和受欢迎的字体,并根据字体支持的字形、符号以及跨平台支持来确定字体的优先级顺序。
功能
提供多种字体排列方案,以适应不同类型的中文字符(简体或繁体)。 支持中英文混排,有效避免中文标点符号受英文字体影响。
如何使用
- 使用 npm 或 pnpm 安装 unocss 和 unocss-preset-chinese:
npm install unocss unocss-preset-chinese --save-dev
- 在您的 UnoCss 配置文件中引入 unocss-preset-chinese 并将其添加到 presets 部分:
// unocss.config.js
import presetChinese from "unocss-preset-chinese";
import { defineConfig, presetUno } from "unocss";
export default defineConfig({
presets: [
presetUno(),
presetChinese({
chineseType: "simplified", // 指定文本为简体中文
}),
// ...custom presets
],
});
配置选项
您可以使用以下配置选项来自定义字体排列方案:
-
extendTheme (boolean, 默认值: true): 是否扩展主题对象。
-
themeKey (string, 默认值: "fontFamily"): 主题对象的键。
-
fonts (Record<string, string | string[]>): 扩展字体,您可以指定不同的字体和字体权重。
-
chineseType (ChineseType, 默认值: "simplified"): 中文的类型,可选值为 "simplified"(简体)或 "traditional"(繁体)。
-
fallbackFont (string[] | null): 用于中文字符的备选字体。
-
declareEnglishFont (string[]): 声明英文文本的字体。
示例
以下是一个示例配置,演示如何使用这些选项来自定义字体排列方案:
import presetChinese from "unocss-preset-chinese";
import { defineConfig, presetUno } from "unocss";
export default defineConfig({
presets: [
presetUno(),
presetChinese({
extendTheme: false, // 不扩展主题对象
themeKey: 'customFontFamily', // 使用自定义的主题键
chineseType: "traditional", // 指定文本为繁体中文
}),
// ...custom presets
],
});