這段時間寫CSS比較多，間接地發現一些與中文有關的CSS特性，在此整理了幾點。?
1. 豎向寫作 writing-mode: vertical-lr;
豎向寫作是一個新特性，允許文字從橫向轉為豎向來表達，很容易聯想到古漢文在竹簡上的豎向寫作，writing-mode同時也是少有的會對不同語言有不同表現的一個CSS屬性，幾種型別示例如下：
p {
writing-mode: vertical-rl;
}
複製程式碼中文在vertical-lr或vertical-rl下每個字元並不會發生旋轉，而英文和阿拉伯數字則會把整個字元旋轉90度。
日文、韓文以及喃文（越南漢文表中）裡和中文遵循一樣的規則，拉丁語系如西班牙語、法語等和英語保持一致。
推薦一箇中文豎向寫作的頁面-––文字的故事。
2. 全寬的字元單位結果 width: 10ch;
CSS單位中ch可能是瀏覽器相容格式裡最冷門的一種，表達大小/長度資訊和具體尺寸無關，是非常有創造力的單位。
在我的實踐中，這個單位在英文段落限制每行間的長度非常有幫助（假設字型使用諸如vw、vh這樣的可響應式單位）。
相信用過中文打字的都會知道全形和半形兩種模式，而漢字是全形字元，即佔用兩個基礎字元寬度，例如安佔的邏輯寬度和an一樣。
p {
max-width: 10ch;
}
複製程式碼每2ch所代表的是一箇中文字元。
從這一點上看，這個單位也很國際化，對不同語言的實際寬度控制是幾乎差不多。中文在版面設計上沒有英文單詞在行末產生的曲線，天生有著左右對齊的美感。?
3. 本土語言的列表編號 list-style-type: cjk-earthly-branch;
偶然在Chrome的開發者工具裡寫list-style-type的時候發現的，這個屬性的很多值目前只有部分瀏覽器支援。
體現的是有序列表用非阿拉伯數字的序列，例如子、醜、寅、卯。
Caniuse目前沒有收錄關於list-style-type的瀏覽器支援情況，
而MDN裡提到了部分值在有些瀏覽器下仍然處於實驗狀態。
試了下cjk-earthly-branch、cjk-heavenly-stem和cjk-ideographic在Safari、Chrome和Firefox最新版本下都是支援的，示例如下：
ul {
list-style-type: cjk-earthly-branch;
}
複製程式碼善用部分瀏覽器支援的list-style-type有序列表特殊值適應本土化設計
4. 系統原生字型的中文宣告 font-family: Tahoma, Helvetica, Arial, "Microsoft Yahei","微軟雅黑", STXihei, "華文細黑", sans-serif;
系統原生字型棧的概念我最先在Bootstrap上看到，顧名思義是指在沒有自定義字型的情況下使用系統的本地字型。 明顯的優勢就是不需要任何的字型依賴和適應各個平臺的字型選擇，而劣勢就是字型方面不同平臺的顯示不同影響設計輸入。
宣告方式：
font-family: Tahoma, Helvetica, Arial, "Microsoft Yahei","微軟雅黑", STXihei, "華文細黑", sans-serif;，英文的字型型別放在前面可以相容使用例如英文版系統但同時安裝中文字型的裝置。?
p {
font-family: Tahoma, Helvetica, Arial, "Microsoft Yahei","微軟雅黑", STXihei, "華文細黑", sans-serif;
}
複製程式碼宣告系統原生中文字型時將英文名放前
5. 可變字型（多比重）transition: font-weight;
英文的網站通常會有很多有意思的字型，但實際上大同小異的很多。可能是英文字母有限，
專門研究字型的人會給字元的不同部分做概括，
例如x-height（字元主幹高度）、seris（襯線體）、descent（下方區，例如p的下部尾巴）。
而中文字元非常多，我們使用了部首來做一些劃分，但是複雜度依然很高，古代流行的手寫實際上對文字寫意追求更多。 下載過中文字型的朋友會知道中文字型包的大小一般會是英文的30到50倍，這就導致了當網站需要完整字型包來適配內容的時候基本只考慮系統中文字型。
動輒10、20MB的字型包對網站效能是個絕對的負擔，何況還要考慮到不同的比重的需求，例如light、regular、medium、bold、heavy等等。
而可變字型不僅可以大大減少所有比重下字型包整體大小，同時由於計算性方式的基礎原理也可以減少字型本身需要佔用的空間，
號稱全球首款的中文可變字型文鼎晶熙黑體竟然只有101KB! ?
甚至可以做transition: font-weight的動畫，
可惜字型包目前所有字元各個比重的覆蓋還不完整。
@font-face {
font-family: 'Arudjingxihei';
src: url('/arudjingxihei-vf.ttf') format("truetype-variations");
font-weight: 1 999;
}
h3 {
font-family: 'Arudjingxihei';
animation: stretch 2.5s ease-in-out infinite alternate;
}
@keyframes stretch {
from {
font-weight: 1;
}
to {
font-weight: 999;
}
}
複製程式碼利用中文可變字型小體積和靈活比重的優勢應用在網頁設計中
個人網站原文：willowcheng.com/zh/blog/css…