國字旁邊產生注音
面對年紀較小，尚在認字的小朋友，注音對他們來說非常重要，差不多等於陽光、水、空氣一樣重要。 在網頁上有各種資訊，但因為少了注音，所以他們就無法閱讀了。 想讓國字旁邊產生注音，有好多種方法，其中在網頁顯示注音最簡單的方法就是使用 css 去自動生成。
下載有注音的字形檔
網路上很多免費的資源可以用，這個優秀的網站就有介紹一些 痞凱踏踏 | PKstep (雖然不認識這個部落客的版主，但免費幫忙工商一下，沒問題的 ^^)
本例子使用”王漢宗中明體注音”
下載後透過 css 去參考
1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
@font-face {
font-family: 'CustomFont'; /* 字體名稱，可以自訂 */
src: url('_.ttf'); /* 字體檔案的路徑 */
/* 可選：字體格式，可以根據字體的實際格式進行調整 */
}
body {
font-size: 4em;
font-family: 'CustomFont', sans-serif; /*
使用您自訂的字體，如果無法載入，則使用後面的替代字體 */
}
</style>
html 中文字
1
2
3
4
<body>
NBA今年奪冠班底、丹佛金塊隊成員小波特(Michael Porter Jr.)今（7）天一大早造訪基隆安樂國中，指導小球員練球，小波特抵達現場時，受到學生們夾道熱烈歡迎，同學也熱情上前擊掌。此行來到台灣四天三夜，小波特說，對基隆導覽行程非常期待，除了吃美食，也會前往和平島觀光。
</body>
轉換結果
收工，搞定
非常簡單吧！