optimize-material3-web

把 MD3 组件库和字体当 CDN 用。
组件拆成一个个文件，按需引用；字体和图标由一个 JS 统一管理，来源可换。

一行接入

样式表 + 色板计算库 + 模块入口，三行搞定

<link rel="stylesheet" href="https://optimize-material3-web.pages.dev/ui_components/beta/1.0/md3.bundle.css">
<script src="https://optimize-material3-web.pages.dev/ui_components/beta/1.0/vendor/material-color-utilities.js"></script>
<script type="module">
  import { boot } from "https://optimize-material3-web.pages.dev/custom_api/beta/1.0/api.js";
  boot();
</script>

// 只引需要的组件：core/ 那几条是基础（令牌 + 字体 + 重置），必须先带；后面按需加 components/
<link rel="stylesheet" href="https://optimize-material3-web.pages.dev/ui_components/beta/1.0/core/tokens.css">
<link rel="stylesheet" href="https://optimize-material3-web.pages.dev/ui_components/beta/1.0/core/fonts.css">
<link rel="stylesheet" href="https://optimize-material3-web.pages.dev/ui_components/beta/1.0/core/base.css">
<link rel="stylesheet" href="https://optimize-material3-web.pages.dev/ui_components/beta/1.0/components/button.css">
<link rel="stylesheet" href="https://optimize-material3-web.pages.dev/ui_components/beta/1.0/components/slider.css">

// 字体默认地址（写死在 using_font/fonts.js 的 CDN 常量里）
//   https://optimize-material3-web.pages.dev/using_font/NotoSansSC-Regular.ttf
//   https://optimize-material3-web.pages.dev/using_font/MaterialSymbolsRounded.woff2

// 整套换成你自己托管的（图标 + 文字一起换）
boot({ fonts: { base: "https://你的域名/fonts/" } });

// 只想换图标字体
boot({ fonts: { icons: { url: "https://你的域名/icons.woff2" } } });

端点

/ui_components/beta/1.0/md3.bundle.css全量样式（合并版）· 一次请求拿全，推荐直接引这个

/ui_components/beta/1.0/md3.css等效的 @import 版，便于按文件追溯；会发 40 个请求，适合本地开发

/ui_components/beta/1.0/components/*.css单个组件样式，按需引用

/ui_components/beta/1.0/index.js组件行为入口（ESM），导出 init / md3

/ui_components/beta/1.0/js/*.js单个行为模块：theme / slider / select / resizable / wavy-progress …

/ui_components/beta/1.0/vendor/material-color-utilities.js种子色 → MD3 色板（Apache-2.0）

https://optimize-material3-web.pages.dev/using_font/fonts.js字体 + 图标统一管理，来源可一句话替换

https://optimize-material3-web.pages.dev/using_font/NotoSansSC-{Light,Regular,Medium,Bold}.ttf文字字体：思源黑体四个字重 · 绝对地址，跨域可直接引

https://optimize-material3-web.pages.dev/using_font/MaterialSymbolsRounded.woff2图标字体：Material Symbols Rounded（可变字体）

https://optimize-material3-web.pages.dev/using_font/fonts.css上面那几个 @font-face 的静态版，不想用 JS 就引它

/custom_api/beta/1.0/api.js公开 API 门面：boot() 一行接入

/custom_api/beta/1.0/api.html在线画廊：每个组件的活文档，代码可复制

说明

静态资源由 Cloudflare 边缘节点直出，跨域头是自动带的（Access-Control-Allow-Origin: *），所以 @font-face、import、fetch 从任何站点直接引用都不需要额外配置。 /using_font/* 已设一年强缓存。