Tufte CSS是由Dave Liepmann创建的项目，旨在将Edward Tufte书籍中的设计理念应用于网页文章排版，强调简洁、侧边注释、图文紧密结合和精心选择的字体。该项目借鉴了Tufte-LaTeX和R Markdown的Tufte Handout格式，并鼓励用户通过GitHub提交改进建议。其目标并非让网页完全模仿书籍，而是探索如何将Tufte的印刷设计技巧应用于网页。

Tufte CSS：基于爱德华·塔夫特设计理念的网页样式工具

Tufte CSS 是一个用于网页文章排版的工具，其设计灵感源自爱德华·塔夫特（Edward Tufte）的书籍和讲义。塔夫特的风格以简洁著称，广泛使用旁注、图文紧密结合以及精心挑选的字体排版。Tufte CSS 由 Dave Liepmann 创建，现已成为爱德华·塔夫特的项目之一，其初始灵感来源于 Tufte-LaTeX 和 R Markdown 的 Tufte Handout 格式。

项目目标
Tufte CSS 的目标并非让网页完全模仿塔夫特书籍的排版，而是借鉴塔夫特在印刷品中使用的技术，探索如何将这些技术应用于网页设计。Tufte CSS 提供了一种实现这些理念的方式，但它应被视为起点，而非最终设计目标，因为每个项目都应根据自身需求呈现信息。

快速上手
要使用 Tufte CSS，只需将 tufte.css 和 et-book 字体文件夹复制到项目目录中，并在 HTML 文档的 head 部分添加以下代码：
<link rel="stylesheet" href="tufte.css"/>
然后按照文档中的 CSS 规则和约定进行排版。

核心功能
1. 章节与标题
- 使用 article 元素组织文档，section 标签用于逻辑分组。
- 标题层级仅支持 h1（文档标题）、h2（章节标题）和 h3（次级标题），避免使用更复杂的层级。
- 段落开头可使用 newthought 类实现小大写字母效果。

2. 文本与字体

   • 网页背景使用浅灰（#fffff8）和深灰（#111111）以降低对比度。
   • 默认使用 ETBook 字体，支持其他衬线字体如 Palatino 和 Georgia。
   • 链接颜色与正文一致，仅通过下划线标识，避免使用蓝色链接。

3. 旁注与边注

   • 旁注（sidenotes）和边注（marginnotes）是塔夫特风格的标志性元素，用于在页面边缘显示补充信息。
   • 在大屏幕上，旁注和边注显示在边缘；在小屏幕上，用户需点击切换显示。
   • 旁注通过 sidenote 类实现，边注通过 marginnote 类实现。

4. 图表与图像

   • 图表与文本紧密结合，避免将图表单独放置。
   • 使用 figure 元素插入图表，边注标签可放置在图表内。
   • 全宽图表可使用 fullwidth 类，嵌入视频可使用 iframe-wrapper 类。

5. 代码与引用

   • 代码使用 code 类标记，长代码示例放置在 pre 元素中。
   • 引用使用 blockquote 元素，引用来源放置在 footer 元素中。

结语
Tufte CSS 是爱德华·塔夫特设计理念在网页上的一次尝试，旨在提供一种清晰、简洁的排版方式。项目欢迎用户通过 GitHub 提交改进建议，但最终目标是为不同项目提供灵活的设计起点，而非固定的设计规范。

评论内容总结：

1. 字体设计问题：

   • 有评论指出网站使用的衬线字体过于狭窄，影响阅读体验，即使在Retina显示屏上也难以阅读。
     • "Is it just me who finds the serif font used in this website too narrow and hard on the eyes, even on Retina displays?"（评论1）
   • 另一评论批评Bembo-like字体设计不佳，字距和小写字母的笔画宽度存在问题。
     • "Bembo-like font is atrocious. Kerning is horrible. Small caps have different stroke widths."（评论5）

2. Tufte CSS的重复发布与审美疲劳：

   • 有评论提到Tufte CSS每年都被重新发布，且随着时间的推移，对其的喜爱程度逐渐下降。
     • "How many times will Tufte CSS be reposted? I feel like I see this every year. Unfortunately I like it less every year too."（评论4）
   • 另一评论列举了多次Tufte CSS的发布历史，暗示其频繁出现。
     • "Previously: Tufte CSS - https://news.ycombinator.com/item?id=42820449 - Jan 2025 (4 comments)"（评论7）

3. Tufte CSS的设计原则与适用性：

   • 有评论认为Tufte CSS的设计原则更适合应用于CMS富文本编辑器或前端模板库，而不是纯粹的CSS。
     • "Reading this I think an interesting alternative approach could to be apply Tufte’s principles to a CMS rich text field editor or to a frontend templating library."（评论3）
   • 另一评论对Tufte CSS中关于降低对比度的设计理念提出质疑，认为预测用户显示条件是不现实的。
     • "But, trying to predict user viewing conditions is wishful thinking."（评论6）

4. 其他观点：

   • 有评论提到Tufte CSS的设计灵感来源于Tufte的书籍，但强调网页设计不应完全模仿印刷品。
     • "The web is not print. Webpages are not books."（评论3）
   • 另一评论调侃Tufte CSS的作者似乎非常喜欢自己的名字。
     • "ctrl+F 'tufte' results in 47 hits in this fairly short article. The guy must love his name even more than Wolfram."（评论8）

总结：评论中对Tufte CSS的字体设计、重复发布、设计原则及其适用性提出了不同的看法，既有批评也有建议，反映了用户对其设计理念的多样态度。