Datatype — 将文本转化为图表的可变字体

# Datatype — 将文本转换为图表的可变字体 来源：https://franktisellano.github.io/datatype/ 一种可将文本转换为图表的可变字体。 \{b:20,55,40,80,65\} \{l:10,40,25,70,50,90\} \{p:73\} \{b:85,30,60,10,45\} \{l:50,20,80,35,65,10\} \{p:41\} GitHub★ (https://github.com/franktisellano/datatype) Google Fonts (https://fonts.google.com/specimen/Datatype) ## Datatype —— 数据即字体 Datatype 是一款 OpenType 可变字体，能将简单的文本表达式转换为内联图表。无需 JavaScript、无需图片、无需渲染库 —— 只需键入语法，Datatype 的连字替换机制便会完成其余工作。 \{b:30,70,50,90\} `\{b:30,70,50,90\}` 柱状图 \{l:10,50,30,80,20\} `\{l:10,50,30,80,20\}` 迷你趋势图 ## Datatype 是一款可变字体 两个轴让你可以控制图表的密度和粗细。拖动滑块即可实时观察图表的响应变化。 \{b:15,45,80,30,60,90,20\} \{l:5,35,20,70,45,85,30,60\} \{p:52\} ## Datatype 在不同尺寸下的效果 相同表达式在 14px 到 64px 范围内的渲染效果。 14px\{b:30,70,20,90\} \{l:20,50,30,80,10\} \{p:65\} 18px\{b:30,70,20,90\} \{l:20,50,30,80,10\} \{p:65\} 24px\{b:30,70,20,90\} \{l:20,50,30,80,10\} \{p:65\} 36px\{b:30,70,20,90\} \{l:20,50,30,80,10\} \{p:65\} 48px\{b:30,70,20,90\} \{l:20,50,30,80,10\} \{p:65\} 64px\{b:30,70,20,90\} \{l:20,50,30,80,10\} \{p:65\} ## Datatype 在实际场景中的应用 Datatype 图表可在任何文本环境中使用 —— 表格、仪表盘、报告。以下是完全由 Datatype 渲染的股票观察列表及其迷你趋势图。 股票30天趋势价格变动AAPLApple\{l:40,25,1,0,34,73,93,100,85,26\}$255.78\-2.27%MSFTMicrosoft\{l:86,86,75,100,52,39,0,26,14,10\}$401.32\-0.13%NVDANvidia\{l:55,70,63,71,100,67,0,88,88,53\}$182.81\-2.21%TSLATesla\{l:81,77,100,73,37,47,0,39,60,39\}$417.44+0.09%AMZNAmazon\{l:86,91,81,90,97,100,54,23,12,0\}$198.79\-0.41%图表自然地嵌入正文中，与周围字体的度量相匹配。 Merriweather（衬线体）Revenue grew steadily through Q3\{l:15,28,40,52,63,78,88,95,74,58\}before a seasonal dip. Market share\{p:34\}held firm against competitors, and our product mix\{b:60,45,80,30\}shifted toward higher margins. IBM Plex Sans（无衬线体）The patient's heart rate\{l:68,82,55,90,42,78,60,85\}remained within normal range. Blood oxygen\{p:97\}was excellent, and the weekly activity breakdown\{b:25,40,55,75,90\}showed consistent improvement. Fira Code（等宽体）cpu\_load\{l:15,45,90,30,75,20,85,95\}spiking mem\_used\{p:78\}req/s by endpoint\{b:90,35,70,15,60\} ## 如何使用 Datatype 将 Datatype 添加到你的 CSS 中，然后在 HTML 中直接输入图表表达式即可。 @font\-face\{font\-family:'Datatype';src:url\('Datatype\.woff2'\) format\('woff2'\);font\-display:swap; \}\.chart\{font\-family:'Datatype', sans\-serif;font\-variation\-settings:'wdth' 15;font\-weight:400; \} Sales\{l:20,40,70,50,90\}are up. Budget\{p:73\}utilized. Results\{b:30,70,20,90\}by quarter. 在 Web 上使用 Datatype 非常简单。请参阅集成指南 (https://franktisellano.github.io/datatype/integrations.html) 了解设置说明。 ### 柱状图`\{b:values\}` 逗号分隔的值，每个值范围为 0–100。最多支持 20 个柱。 \{b:15,45,80,30,60\} `\{b:15,45,80,30,60\}` 5 个柱 —— 值决定柱高百分比 ### 迷你趋势图`\{l:values\}` 逗号分隔的值，每个值范围为 0–100。最多支持 20 个点。 \{l:10,40,25,70,50,90,35\} `\{l:10,40,25,70,50,90,35\}` 7 个点 —— 值决定点高度百分比 ### 饼图`\{p:value\}` 单个值，范围 0–100，表示填充百分比。