标签云需css/js协同实现：静态用data-weight+属性选择器映射视觉规则；动态用js归一化频次后设style.fontsize或css变量配合clamp()防越界。
纯 HTML 本身不提供标签云功能，font-size 不会自动按权重缩放，所有“云”效果都依赖 CSS 控制字号/颜色 + JS 或后端动态注入权重逻辑——硬写一堆 <a></a> 标签堆在一起，只是列表，不是标签云。
怎么用 data-weight + CSS 属性选择器做静态映射
适合权重固定、更新极少的场景（如技术栈展示）。关键不是写死像素值，而是让每个 data-weight 值对应一组可维护的视觉规则。
- HTML 中每个标签带
data-weight="1"到data-weight="4"，范围窄、易分档 - CSS 用属性选择器直接匹配：
a[data-weight="1"] { font-size: 0.85em; opacity: 0.7; } - 避免用
nth-child或类名硬编码——新增词频后样式全乱 - 别给容器设
font-size: 0再子元素重设——这会破坏em相对计算，改用px或clamp()
怎么用 JS 动态算字号并注入 style（防 NaN 和越界）
从 API 或 DOM 提取词频后，必须过滤、归一化、截断，否则 font-size 很容易变成 NaNpx 或负值，浏览器静默失败但渲染异常。
- 先清理数据：
tags.filter(t => typeof t.count === 'number' && t.count > 0) - 取最大值前检查数组长度：
const max = tags.length ? Math.max(...tags.map(t => t.count)) : 1 - 字号锁定在安全区间：
const size = Math.min(28, Math.max(12, 12 + (t.count / max) * 16)) + 'px' - 直接设
tag.style.fontSize = size，别用class切换——避免样式表里一堆冗余规则
为什么 clamp() + CSS 变量比 JS 写内联更稳
clamp() 是浏览器原生防越界函数，能避免 JS 执行时机导致的 FOUC（闪动），但前提是频次已转为归一化后的 CSS 变量。
- JS 中设置：
el.style.setProperty('--freq', t.count / Math.max(1, max)) - CSS 中写：
font-size: clamp(12px, calc(12px + var(--freq) * 16px), 28px) - 注意 Safari clamp()，降级方案是 JS 检测后 fallback 到内联
fontSize - 别把原始频次（比如 1200）直接当
--freq值——calc()乘出来会溢出，必须先除以最大值归一化到 0–1
点击筛选时怎么避免字体跳变和重复绑定
加交互后，如果用 JS 改 class 触发 font-size 变化，又没设回退值，transition 会导致字号突然收缩或拉伸；事件监听若没清理，点多次就绑多次。
- 筛选时不改
font-size，只切hidden类控制显隐，保持字号恒定 - 用事件委托绑定到父容器：
container.addEventListener('click', e => { const tag = e.target.closest('[data-category]'); ... }) - 每次筛选前清空旧
data-active，再设当前项，防止多个高亮 - 移动端慎用
click，touchstart更快，但得加setTimeout防误触
最常被忽略的是权重归一化的起点：不是原始频次，而是清洗后非零数值的最大值；以及 clamp() 的三个参数必须单位一致，var(--freq) 必须是纯数字（0–1），不能带单位或字符串。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
