# @calcom/cal-sans-ui 中文文档

规范地址：https://npmcn.com/package/%40calcom/cal-sans-ui/

版本：1\.3\.0
npm 元数据更新时间：2026-08-06T16:26:33.450Z
中文译文更新时间：2026-11-08T23:45:45.627Z
软件包许可：OFL-1\.1

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40calcom/cal-sans-ui
原文对照：https://npmcn.com/package/%40calcom/cal-sans-ui/?lang=original
项目主页：https://github.com/calcom/sans-ui#readme
源码仓库：https://github.com/calcom/sans-ui

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：884 kB，29 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：next \>=13\.2\.0
- 首次发布：2026-02-04T21:05:37.602Z
- 最新版本发布：2026-03-17T17:35:59.801Z
- 近 30 天下载量：13941（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：4（近 12 个月 4 个）

## 中文简介

Cal Sans UI, Cal Sans Text, 以及 Cal Sans Geo 用于 Cal.com 界面

## 安装

```sh
npm install @calcom/cal-sans-ui
```

也可以使用：`pnpm add @calcom/cal-sans-ui`、`yarn add @calcom/cal-sans-ui`、`bun add @calcom/cal-sans-ui`

## README

# @calcom/cal-sans-ui (英语)

Cal Sans UI, Cal Sans Text, 和 Cal Sans Geo 类型面 [Cal.com (英语)](https://cal.com/)。 。 。 .

## 安装

```bash
npm install @calcom/cal-sans-ui
```

**下一个.js:** 相邻依赖

## 与 Next.js 一起使用

### Next.js 配置(Next.js < 15)

添加 `transpilePackages` 改为 `next.config.js` 或者说 `next.config.mjs`数字 :

```js
/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ["@calcom/cal-sans-ui"],
};

export default nextConfig;
```

### 应用路由器

单位 `app/layout.js` 或者说 `app/layout.tsx`数字 :

```jsx
import { CalSansUI } from "@calcom/cal-sans-ui/ui";
import { CalSansText } from "@calcom/cal-sans-ui/text";
import { CalSansGeo } from "@calcom/cal-sans-ui/geo";

export default function RootLayout({ children }) {
  return (
    <html lang="en" className={`${CalSansUI.variable} ${CalSansText.variable} ${CalSansGeo.variable}`}>
      <body>{children}</body>
    </html>
  );
}
```

### 页面路由器

单位 `pages/_app.js`数字 :

```jsx
import { CalSansUI } from "@calcom/cal-sans-ui/ui";

export default function MyApp({ Component, pageProps }) {
  return (
    <main className={CalSansUI.className}>
      <Component {...pageProps} />
    </main>
  );
}
```

## 有尾风CSS

将 Cal Sans 映射到 Tailwind 的主题变量, 这样您就可以使用 `font-sans` (身体),(身体),(身体), `font-heading` (标题),和 `font-display` (乔治):

**尾风 v4** – 说吧 – `tailwind.css`数字 :

```css
@theme {
  --font-sans: var(--font-cal-sans-ui), ui-sans-serif, sans-serif;
  --font-heading: var(--font-cal-sans-text), ui-sans-serif, sans-serif;
  --font-display: var(--font-cal-sans-geo), ui-sans-serif, sans-serif;
}
```

**尾风 v3** – 说吧 – `tailwind.config.js`数字 :

```js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ["var(--font-cal-sans-ui)", "sans-serif"],
        heading: ["var(--font-cal-sans-text)", "sans-serif"],
        display: ["var(--font-cal-sans-geo)", "sans-serif"],
      },
    },
  },
};
```

组件的使用:

```tsx
<p className="font-sans">Body text uses Cal Sans UI</p>
<h1 className="font-heading">Headings use Cal Sans Text</h1>
<h1 className="font-display">Display text uses Cal Sans Geo</h1>
```

对于GEOM轴(例如子标题):

```tsx
<h2 className="font-heading" style={{ fontVariationSettings: '"GEOM" 50' }}>
  Subheading
</h2>
```

## 非下一个js(Vite、CRA等)

```ts
import "@calcom/cal-sans-ui/ui.css";
import "@calcom/cal-sans-ui/text.css";
import "@calcom/cal-sans-ui/geo.css";
```

```css
h1 {
  font-family: "Cal Sans Text", sans-serif;
  font-variation-settings: "GEOM" 50;
}

p {
  font-family: "Cal Sans UI", sans-serif;
  font-variation-settings: "GEOM" 0;
}
```

对于不支持可变字体的浏览器: `import "@calcom/cal-sans-ui/ui-non-variable.css"`

## 出口

| 导入 | 说明 |
| --- | --- |
| `@calcom/cal-sans-ui` | 下一个 : `CalSansUI`, (中文(简体) ), `CalSansUINonVariable`, (中文(简体) ), `CalSansText`, (中文(简体) ), `CalSansGeo` (皆为一. **偏爱.** |
| `@calcom/cal-sans-ui/ui` | 下一个 : `CalSansUI` (可变). |
| `@calcom/cal-sans-ui/ui-non-variable` | 下一个 : `CalSansUINonVariable` (静态UI). |
| `@calcom/cal-sans-ui/text` | 下一个 : `CalSansText` (可变子标题). |
| `@calcom/cal-sans-ui/geo` | 下一个 : `CalSansGeo` (可变). |
| `@calcom/cal-sans-ui/ui.css` | CSS:可变字体. |
| `@calcom/cal-sans-ui/ui-non-variable.css` | CSS:静态UI重量. |
| `@calcom/cal-sans-ui/text.css` | CSS:卡尔·桑斯文本. |
| `@calcom/cal-sans-ui/geo.css` | CSS: Cal Sans Geo. (中文(简体) ). |

## 许可证

SIL 开放字体许可证 1.1. 见 [OFL.txt (英语)](https://npmcn.com/package/%40calcom/cal-sans-ui/OFL.txt)。 。 。 .

## 常见问题

### @calcom/cal-sans-ui 是什么？

Cal Sans UI, Cal Sans Text, 以及 Cal Sans Geo 用于 Cal\.com 界面

### 如何安装 @calcom/cal-sans-ui？

在项目目录运行 npm install @calcom/cal-sans-ui，或使用 pnpm add / yarn add / bun add。

### @calcom/cal-sans-ui 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @calcom/cal-sans-ui 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @calcom/cal-sans-ui 可以商用吗？

@calcom/cal-sans-ui 使用 OFL-1\.1 许可。声明的许可为 OFL-1\.1，请阅读许可原文确认使用条件。以上为概括，不构成法律意见，请以许可原文为准。

### @calcom/cal-sans-ui 的下载量有多少？

根据 npm 官方下载统计，@calcom/cal-sans-ui 在 2026/10/09 – 2026/11/07 这 30 天内被下载 13,941 次，日均约 465 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @calcom/cal-sans-ui 还在维护吗？

最新版本 1\.3\.0 发布于 2026/03/18（7 个月前）；至今共发布 4 个版本，其中过去 12 个月发布了 4 个；首次发布于 2026/02/05。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。