![fHJ9cZeOp.jpg](https://developer.qcloudimg.com/http-save/yehe-9735680/536539a101d0485a5a5e86c774e4cf39.jpg)

在当今信息爆炸的时代，内容呈现的形式往往决定了阅读体验的优劣。对于中文网站来说，一个长期存在的挑战是如何实现符合传统中文排版美学的网页展示。尽管现代CSS技术已经十分强大，但针对中文特点的排版优化仍然不够完善。今天，我们将介绍一个专门为解决这一问题而生的开源项目——**赫蹏**（hètí）。

## 什么是赫蹏？

赫蹏是一个专为中文内容展示设计的排版样式增强库，名称取自古代对纸张的雅称。这个项目由开发者Sivan创建，基于通行的中文排版规范，旨在为网站的读者提供更加舒适、专业的文章阅读体验。

简单来说，**赫蹏让中文网页内容“自动变好看”**。

该项目在github  已有6.6k star 

![_20260102_222650.png](https://developer.qcloudimg.com/http-save/yehe-9735680/de0278dadbe4a48667315a3f9392cf26.png)

- github 地址： [https://github.com/sivan/heti](https://github.com/sivan/heti)
- 在线预览地址：[https://sivan.github.io/heti/](https://sivan.github.io/heti/)

![_20260102_223923.png](https://developer.qcloudimg.com/http-save/yehe-9735680/4026e7e152c84e3e6fc7a5e4a100a28a.png)


## 核心特性一览

### 🎯 贴合网格的精准排版
赫蹏实现了基于网格系统的中文排版，确保文字、段落和间距都遵循严谨的视觉规律，让页面呈现出整齐划一的专业感。

### 📝 全标签样式美化
项目不仅仅针对段落文本，而是对整个HTML文档中的各类标签（标题、列表、表格、代码块等）都进行了细致的美化，形成统一而和谐的整体视觉风格。

### 🏮 传统版式支持
赫蹏贴心地预置了**古文、诗词样式**，并提供了多种传统排版样式支持：
- 行间注（类似于古籍中的双行小注）
- 多栏排版
- 竖排文字
- 为需要展示传统文学内容的网站提供了极大便利

### 🌗 智能适配设计
- **自适应黑暗模式**：跟随系统设置自动切换明暗主题
- **移动端优先**：在各种屏幕尺寸上都有良好表现
- **简繁中文支持**：满足不同地区用户的需求

### ✨ 智能排版增强（基于JavaScript）
这是赫蹏的“黑科技”部分：
- **中西文混排美化**：自动在中英文之间添加适当间距，再也不用手动敲空格
- **全角标点挤压**：智能调整标点符号的间距，避免出现难看的空白

### 🎨 字体优化
提供多种预设的中文字体族选择（桌面端），可根据不同内容风格搭配最合适的字体组合。

## 极简的安装与使用

赫蹏的设计哲学是“最小化侵入”，使用起来异常简单：

### 基础使用（仅CSS）
```html

<link rel="stylesheet" href="//unpkg.com/heti/umd/heti.min.css">


<article class="heti">
  <h1>文章标题</h1>
  <p>这里是你所有的中文内容...</p>
</article>
```

只需这两步，你的内容就会立刻获得专业级的中文排版效果。

### 增强功能（添加JavaScript）
```html
<script src="//unpkg.com/heti/umd/heti-addon.min.js"></script>
<script>
  const heti = new Heti('.heti');
  heti.autoSpacing(); // 启用智能中西文混排和标点挤压
</script>
```

## 实际效果展示

我比较喜欢的是`竖排`排版的样式,我们在markdown中也可以直接使用，如下使用

```
<link rel="stylesheet" href="//unpkg.com/heti/umd/heti.min.css">

<div class="card__vertical-container">
<section class="heti--vertical heti--ancient">
<h1>出師表</h1>
<p class="heti-small">作者：<abbr title="字孔明">諸葛亮</abbr>（181年－234年10月8日）</p>
<p>先帝創業未半，而中道崩殂；今天下三分，益州疲弊，此誠危急存亡之秋也﹗然侍衞之臣，不懈於內；忠志之士，忘身於外者，蓋追先帝之殊遇，欲報之於陛下也。</p>
<p>誠宜開張聖聽，以光先帝遺德，恢弘志士之氣﹔不宜妄自菲薄，引喻失義，以塞忠諫之路也。</p>
<p>宮中、府中，俱為一體；陟罰臧否，不宜異同。若有作姦、犯科，及為忠善者，宜付有司，論其刑賞，以昭陛下平明之治；不宜偏私，使內外異法也。</p>
<p>侍中、侍郎郭攸之、費禕、董允等，此皆良實，志慮忠純，是以先帝簡拔以遺陛下。愚以為宮中之事，事無大小，悉以咨之，然後施行，必能裨補闕漏，有所廣益。將軍向寵，性行淑均，曉暢軍事，試用於昔日，先帝稱之曰「能」，是以眾議舉寵為督。愚以為營中之事，悉以咨之，必能使行陣和睦，優劣得所。</p>
<p>親賢臣，遠小人，此先漢所以興隆也﹔親小人，遠賢臣，此後漢所以傾頹也。先帝在時，每與臣論此事，未嘗不歎息痛恨於桓、靈也！侍中、尚書、長史、參軍，此悉貞良死節之臣，願陛下親之、信之，則漢室之隆，可計日而待也。</p>
<p>臣本布衣，躬耕於南陽，苟全性命於亂世，不求聞達於諸侯。先帝不以臣卑鄙，猥自枉屈，三顧臣於草廬之中，諮臣以當世之事；由是感激，遂許先帝以驅馳。後值傾覆，受任於敗軍之際，奉命於危難之間，爾來二十有一年矣。先帝知臣謹慎，故臨崩寄臣以大事也。受命以來，夙夜憂歎，恐託付不效，以傷先帝之明。故五月渡瀘，深入不毛。今南方已定，兵甲已足，當獎率三軍，北定中原，庶竭駑鈍，攘除姦凶，興復漢室，還於舊都。此臣所以報先帝而忠陛下之職分也。至於斟酌損益，進盡忠言，則攸之、禕、允之任也。</p>
<p>願陛下託臣以討賊興復之效；不效，則治臣之罪，以告先帝之靈。若無興德之言，則責攸之、禕、允等之慢，以彰其咎。陛下亦宜自謀，以諮諏善道，察納雅言，深追先帝遺詔。臣不勝受恩感激。今當遠離，臨表涕零，不知所言！</p>
</section>
</div>
```
效果如下：

![_20260102_224539.png](https://developer.qcloudimg.com/http-save/yehe-9735680/d6b23d467c3e6b313b4a399180513abb.png)


我使用ai 基于赫蹏（hètí）做了一个竖版排版的网站，感兴趣的家人们也可以使用下

博主竖版排版网址： [http://h5.xiuji.mynatapp.cc/heti/](http://h5.xiuji.mynatapp.cc/heti/)

![_20260102_232901.png](https://developer.qcloudimg.com/http-save/yehe-9735680/cd0bff4aab379a5430a5b002ee4614c9.png)

![_.png](https://developer.qcloudimg.com/http-save/yehe-9735680/5fd34606819b8d8345521315e852a1ed.png)




## 结语：让内容回归本质

在追求炫酷交互和复杂动画的今天，赫蹏提醒我们一个基本事实：对于内容型网站，**优秀的可读性才是最重要的用户体验**。这个项目以极低的成本，为中文网页带来了显著的品质提升。

如果你正在经营一个以中文内容为主的网站，或者只是想在个人博客上获得更好的排版效果，不妨尝试一下赫蹏。正如项目README中所说的：“总之，用上就会变好看。”


赫蹏不仅是一个工具，更是对中文数字阅读体验的一次优雅致敬。在这个注意力稀缺的时代，为读者提供一个舒适的阅读环境，或许就是最好的内容策略。

在当今信息爆炸的时代，内容呈现的形式往往决定了阅读体验的优劣。对于中文网站来说，一个长期存在的挑战是如何实现符合传统中文排版美学的网页展示。尽管现代CSS技术已经十分强大，但针对中文特点的排版优化仍然不够完善。今天，我们将介绍一个专门为解决这一问题而生的开源项目——赫蹏（hètí）。

赫蹏(hètí):为中文网页内容赋予优雅排版的开源利器

赫蹏（hètí）是专为中文内容展示设计的排版样式增强。它基于通行的中文排版规范而来，可以为网站的读者带来更好的文章阅读体验。

数据库

赫蹏(hètí)是一款专为中文网页设计的开源排版优化库，提供网格精准排版、全标签美化、传统版式支持等功能。支持中西文混排优化、全角标点挤压，适配明暗主题和移动端，让中文内容自动呈现专业排版效果。GitHub开源项目，简单引入CSS即可使用。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

赫蹏(hètí):为中文网页内容赋予优雅排版的开源利器-腾讯云开发者社区-腾讯云

赫蹏(hètí):为中文网页内容赋予优雅排版的开源利器

赫蹏(hètí):为中文网页内容赋予优雅排版的开源利器

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐