惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

爱范儿
爱范儿
博客园 - 【当耐特】
量子位
Engineering at Meta
Engineering at Meta
博客园_首页
大猫的无限游戏
大猫的无限游戏
IT之家
IT之家
V
Visual Studio Blog
小众软件
小众软件
阮一峰的网络日志
阮一峰的网络日志
美团技术团队
Jina AI
Jina AI
The Cloudflare Blog
T
Tailwind CSS Blog
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
雷峰网
雷峰网
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
宝玉的分享
宝玉的分享
WordPress大学
WordPress大学
有赞技术团队
有赞技术团队
酷 壳 – CoolShell
酷 壳 – CoolShell
Last Week in AI
Last Week in AI
人人都是产品经理
人人都是产品经理
博客园 - 聂微东

eallion's Blog

春假清明自驾游 Ubuntu 25.10 安装和配置 秋假 彩礼 2025 博客变化 预制菜 联邦礼仪之一 重拾写博客的乐趣 少儿 TED - 时间管理大师 n8n 之同步博客到 Mastodon n8n 之备份 Mastodon 嘟文 如何备份 Mastodon Docker 部署 Mastodon NAS 折腾记 Windows 11 安装软件 Hugo 博客集成 Mastodon 独立博客自省问卷 15 题 Chrome 插件更新:网址净化器 在 Hugo 中使用 Shiki 炒菜万能公式 uBlacklist 订阅合集 读《中文互联网正在加速崩塌》 CSS 和 JS 实现博客热力图 受灾小记 那,他吃什么?! Mastodon 同步到 Memos Hugo 外部链接跳转提示页面 联邦宇宙及 Mastodon 简介 2024 博客变化 部署动态生成 OG Image 的 API
博客排版 - 挤压中文标点符号
Charles Chin · 2024-10-29 · via eallion's Blog

# 示例

连续的中文全角标点符号的默认排版样式,默认 1 个全角标点会占用 2 个字符宽度,当连续的全角标点出现时,会出现大量的空白。(可点击图片)看一个例子:

# 解决方案

如「 赫蹏」(heti)就有挤压标点符号的 JS 插件;还有 ethantw/Han 也很优秀;OpenType 字体的 halt(Alternate Half Widths)功能也可将全角字符以半角的形式显示,只需要设置 CSS 属性 font-feature-settings: "halt" 便可打开该特性,只是支持的字体有限。就不一一例举了。

关于中英文混合排版是另一个大的话题。

我在本地用了 autocorrect 插件,写完博客就对文章进行中英文混合排版自动格式化了,不需要在线插件,所以现在只介绍标点挤压。

# 1. 全局属性 lang

不仅限于此插件,所有博客页面应该设置对应的 HTML 全局属性 lang:

<html lang="zh-cn"></html>

# 2. 引入 heti-addon

我直接用了「赫蹏」标点挤压增强脚本:

<script src="//unpkg.com/heti/umd/heti-addon.min.js"></script>
<script>
  const heti = new Heti('.heti');
  heti.autoSpacing();
</script>

PS:也可以把 JS 下载到本地引入,如 Hugo 下载到 assets/js 目录:

{{ $hetiJS := resources.Get "js/heti-addon.min.js" | fingerprint "sha256" }}
<script type="text/javascript" src="{{ $hetiJS.RelPermalink }}" integrity="{{ $hetiJS.Data.Integrity }}"></script>

# 3. 添加自定义 CSS

从 Heti.css 中提取了挤压标点用到的 CSS,添加到博客的样式文件中:

/* heti custom css */
.heti {
  font-feature-settings: "halt";
}

.heti heti-spacing {
  display: inline;
}

.heti .heti-spacing-start {
  margin-inline-end: .25em;
}

.heti .heti-spacing-end {
  margin-inline-start: .25em;
}

.heti heti-adjacent {
  display: inline;
}

.heti .heti-adjacent-half {
  margin-inline-end: -0.5em;
}

.heti .heti-adjacent-quarter {
  margin-inline-end: -0.25em;
}

# 4. 添加 Heti 标签

添加 Heti 标签让挤压标点插件生效。不建议加到 <html> 或者 <body> 等标签上,尽量加到文章标签上:

- <div class="content">
+ <div class="content heti">
	<p>...</p>
</div>