使用 Yaku Han JP 在網頁上做到如 Adobe InDesign 的文字間距優化
全形標點符號在使用上會有額外空白的問題，通常在平面排版上我們會透過 Adobe InDesign 內建的「文字間距預設集」或是「文字間距設定」來優化符號與符號間的字距，但是在網頁上該怎麼辦呢？
對網頁技術有了解的朋友會知道，在文字排版處理上，以目前的技術規範還有很多未盡之處，比方說 kerning 的部分。不過在中文排版上，特定標點符號與標點符號間相鄰所造成的大量空白問題，也著實令人傷腦筋，雖然 Yaku Han JP 這項專案所使用的技術不如 Adobe InDesign 那麼有彈性，不過至少確實地解決了在文字排版上文字間距不美觀的一大問題。
最近注意到有蠻多日本網站在 CSS 用來指定字體的「font-family」的屬性中多加上了 YakuHanJP 這個字體名稱，為的就是能夠在 Web 上達到跟 Adobe InDesign 一樣可以縮減標點符號間距的功能，YakuHanJP 其實是一個透過 @font-face 功能指定的字體集，也是一項專案的名稱，這項專案支援了「ゴシック体（黑體）」、「明朝体（明體）」以及「丸ゴシック（圓體）」三種字體風格，一個字體檔中最多只有 25 個全形字元，也就是 、。！？〈〉《》「」『』【】〔〕・（）：；［］｛｝這些字符。
Yaku Han JP 是作者 Qrac 在《HTML5 Conference 2016 Lightning Talks》提出的解決方案，這項專案背後所使用的技術原理其實很簡單，即是透過指定 font-face 的 unicode-range 去替換全形標點符號字符所使用的字體，藉此直接去除掉文字排版中特定組合下相鄰全形符號不美觀的空白部分，經我本人初步測試，可以無痛直接應用在中文內容上沒有問題。
從上圖可以看出未使用 Yaku Han JP 之前，我刻意在主標題的書名號與雙引號間加入頓號，讓文字間距看起來分的特別開，而下方文字摘錄的部分，括號與逗點間的字距在一般狀況下也會顯得特別大。
但是套用 Yaku Han JP 之後，情況就有了明顯地改善：
這樣的文字排版看起來是不是舒服多了呢？在替換掉原本全形字元所佔用的空間後，標題長度也從原本的四行出頭一點不俐落的狀態縮減為三行，透過 unicode-range 的特點，除了能夠達到排版上美觀的效果以外也能在不變動字元長度的狀況下節省標點符號所額外佔用的空間。
專案首頁上也將瀏覽器的支援版本明列清楚：
至於使用方法也很簡單，目前除了在 Github 上可以下載外，也有提供 CDN直接引用，因此你可以直接使用以下的範例語法來參考如何設定：
<!-- HTML：CDNリンクを貼り付け -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/yakuhanjp@3.3.1/dist/css/yakuhanjp.min.css"> // CSS：font-familyを設定
.example {
font-family: YakuHanJP, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
}
在 Yaku Han JP 專案的官方頁面上也有提供模擬器讓你測試在不同的字重、字級與字體間搭配的效果預覽，你也可以選擇只用來替換各類引號，並保留、。！？・：；這些標點符號的原始全形大小，讓頁面上單獨運用這些符號時，不會有誤用了半形標點符號的錯覺。
發現這個專案後，個人對日本人在細節上的堅持相當佩服，掌握技術本身不是最重要的，最重要的如何使用這些技術來達成對美感的要求，只能說感恩日本人，讚嘆日本人！
