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

Cal Sans UI, Cal Sans Text, 和 Cal Sans Geo 类型面 Cal.com (英语)。 。 。 .

安装

npm install @calcom/cal-sans-ui

下一个.js: 相邻依赖

与 Next.js 一起使用

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

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

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

export default nextConfig;

应用路由器

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

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数字 :

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数字 :

@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数字 :

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"],
      },
    },
  },
};

组件的使用:

<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轴(例如子标题):

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

非下一个js(Vite、CRA等)

import "@calcom/cal-sans-ui/ui.css";
import "@calcom/cal-sans-ui/text.css";
import "@calcom/cal-sans-ui/geo.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"

出口

许可证

SIL 开放字体许可证 1.1. 见 OFL.txt (英语)。 。 。 .