中英文間隔CSS

Fri, 04 Sep 2026 00:00:00 +0000

環境

作業系統：Windows 11
程式碼編輯器：Visual Studio Code
紀錄時間：2026年9月

語法

text-autospace CSS屬性允許指定中日韓（CJK）字元和非中日韓字元之間的間距行為。

body {
 text-autospace: normal;
}

normal ：建立預設行為，自動在CJK字元與非CJK字元之間以及標點符號周圍新增間距。此值的效果等同於同時應用 ideograph-alpha 和 ideograph-numeric 。

為什麼用它代替空格

以往在網頁上用鍵盤打半形空格（Space）會顯得中英文間距過大（寬度高達0.5em）。而 text-autospace 是由瀏覽器自動計算並塞入約1/8 em的微小微調間距，視覺效果比純空格更緊湊、更具美感。

如果網頁內容本身已經有用鍵盤打的實體空格，瀏覽器在解析 text-autospace 時會自動跳過，不會讓你的間距疊加變得更寬。

在VS Code中把Markdown中英文之間的空格消除

方法一、搜尋與取代

在VS Code中打開你的檔案，按下Ctrl + H開啟取代視窗，並依照下列步驟設定：

開啟正規表達式模式：請務必點亮搜尋框最右側的 .* 圖示（或按下快捷鍵Alt + R，啟用正規表達式功能。
欄位輸入內容你需要分兩次操作，一次清除「中文+空格+英文」，一次清除「英文+空格+中文」：
- 步驟A：清除【中文 ➔ 英文】之間的空格尋找 (Find)： ([\u4e00-\u9fa5]+) +([a-zA-Z0-9]+) 取代為 (Replace)： $1$2 動作：點擊右側的Replace All（全部取代）圖示（或按Ctrl + Alt + Enter）。
- 步驟B：清除【英文 ➔ 中文】之間的空格尋找 (Find)： ([a-zA-Z0-9]+) +([\u4e00-\u9fa5]+) 取代為 (Replace)： $1$2 動作：再次點擊Replace All（全部取代）。

原理說明

[\u4e00-\u9fa5] ：代表所有的中文字（Unicode範圍）。 [a-zA-Z0-9] ：代表所有的英文字母與數字。 + （中間有空格）：代表匹配一個或多個連續的半形空格。 () 與 $1$2 ：把前後的文字暫存起來，並在取代時直接黏在一起，中間的空格就會被刪除。

PaperMod主題設定

Tue, 01 Sep 2026 00:00:00 +0000

顏色

設定的顏色

程式碼

檔案路徑： /assets/css/extended/custom.css
HEX（十六進位色碼）是我有修改的，RGB是原本的。

/* Dark mode下的顏色 */
:root[data-theme="dark"] {
 --theme: #0e1923;
 --entry: #474a4d;
 --primary: #e7e7eb;
 --secondary: #e7e7eb;
 --tertiary: rgb(65, 66, 68);
 --content: #e7e7eb;
 --code-block-bg: rgb(46, 46, 51);
 --code-bg: rgb(55, 56, 62);
 --border: #afafb0;
 color-scheme: dark;
}
/* 文章底下的標籤 */
.post-tags a {
 background: #474a4d;
}

字體大小與排版

檔案路徑： /assets/css/extended/custom.css

/* 全站適用：開啟中英文與數字之間的自動微調空格 */
html,
body {
 text-autospace: normal !important;
}
/* 調整文章內文的字體大小 */
.post-content,
.post-content p {
 font-size: 1.2rem;
 line-height: 1.7;
 /* 同步調大行高，閱讀起來更舒適 */
}
/* 放大文章日期、作者、閱讀時間等 */
.post-meta {
 font-size: 1.2rem !important;
 margin-top: 0.5rem !important;
 /* 增加日期與上方標題之間的間距，看起來更舒適 */
}
.post-tags a {
 font-size: 1.2rem !important;
 padding: 0.25rem 0.625rem !important;
 /* 同步將邊距換算為rem，按鈕會隨字體完美縮放 */
}
/* 調整文章內的程式碼區塊字體大小 */
.post-content pre code {
 font-size: 16px !important;
 line-height: 1.6 !important;
}
/* 行內程式碼也一起放大 */
.post-content code {
 font-size: 0.95em !important;
 /* 使用相對大小，讓它隨段落文字等比例放大 */
}
/* 放大程式碼複製按鈕 */
.copy-code {
 transform: scale(1.5) !important;
 transform-origin: right top;
 /* 確保按鈕以右上角為基準點放大，不影響排版 */
}
/* 單篇文章頁面底部的標籤區塊 */
.share-buttons+.post-tags,
footer.post-footer .post-tags a {
 font-size: 1.2rem !important;
}
/* 強制放大首頁文章列表的日期與資訊文字 */
.first-entry footer,
.post-entry footer,
.entry-footer {
 font-size: 1.2rem !important;
}
/* 縮小首頁文章卡片的邊框內邊距，讓邊框緊貼文字 */
.post-entry {
 padding: 0.5rem 1rem !important;
}
/* 確保點擊整張卡片時的互動範圍同步縮小 */
.post-link {
 padding: 0 !important;
 /* 清除連結的預設補白，避免撐開卡片 */
}
/* 微調標題與日期之間的距離，讓整張卡片更緊湊 */
.post-entry .entry-header h2 {
 margin-bottom: 0.25rem !important;
 /* 縮小標題與日期之間的空隙 */
}
/* 縮小首頁文章卡片之間的間距 */
.post-entry {
 margin-bottom: 20px !important;
}
/* 放大網頁最下方的Footer頁尾文字 */
.footer {
 font-size: 1rem !important;
 line-height: 1.6 !important;
 /* 同步調大行高，避免多行時擠在一起 */
}

連結

設定連結在新分頁開啟。
檔案路徑： /layouts/_default/_markup/render-link.html"

部落格 on DocusNotes