配置字体
@aleph-alpha/ config-fonts
嵌入式WOFF2网络字体作为基础64数据URI. 框架不可知性——主要消费者是 @aleph-alpha/config-unocss'webfonts预设,但二进制可以从任意框架(MUI,平面CSS,Tailwind,.)使用.
安装
pnpm add @aleph-alpha/config-fonts
使用量
import { raleway500, roboto500, montserrat600, inter400 } from '@aleph-alpha/config-fonts';
// Each export is a base64-encoded WOFF2 data URI (`data:…;base64,…`) you can drop into a @font-face src.
const css = `@font-face { font-family: 'Raleway'; src: url(${raleway500}) format('woff2'); font-weight: 500; }`;
可用字体
| 家属 | 重量 |
|---|---|
| 间 | 400,500,600,700 (英语) |
| 蒙特塞拉特 | 500、600、700个 |
| 拉莱韦 | 500、600、700个 |
| 机器人 | 500、600、700个 |
添加字体
使用包含的转换器转换 a .woff2 二进制为基数64-编码的 TS 模块 :
node src/utils/convert-fonts.js path/to/myfont.woff2 src/fonts/myfont.woff2.ts
然后从这里再出口 src/index.ts。 。 。 .