緣由
今天早上在 Facebook 的 Joomla! 社團中看到網友提出了這樣的疑問:「用joomla架設的網站文章字體是可以更改或自己新增的嗎?」讓阿寶想到先前曾在網站上看到有個名為「CT-BOX 魔力文字」的網站有提供免費網頁字型轉換服務,在與對方就服務內容進行討論之後有了這篇文章。
網頁文字使用特定字型的難處
就阿寶所知道的知識是:網頁的內容字體是由使用者設備所安裝的字型(在 Windows 作業系統上是細明體或新細明體)決定的,我們雖可以在瀏覽器設定中設定網頁訊息以另外的字型顯示,但是結果也只有自己的設備上才會有所變更,其他網友看到的還是系統預設的字體…
那麼…如果我把變更的字體放在網站上,然後透過 HTML 或 CSS 語法設定網站內容以指定的字型顯示呢?這樣的做法是可行的,不過相對的也衍生了兩個問題:
- 以Windows 作業系統所使用的 TrueType 中文字型來說,每種字型的檔案都有數 MB,網友要瀏覽網站內容前得先下載字型資料,朋友覺得網友願意花多少時間在等待上?
- 字型的授權也是一個問題,請問朋友自行上傳的這些字型在字型廠商的授權上有讓朋友用在網站內容顯示上嗎?
「CT-BOX 魔力文字」網站的服務為以上問題找到了突破口,以下阿寶就服務申請、設定,以及在Joomla! 網站上使用自訂字體的方式與朋友分享。
▲CT-BOX 魔力文字首頁,明確顯示網站服務。
▲可從「字體列表」頁面看到網站提供的字型種類及字體大小變化。
▲頁面下方提供不同內文點數在頁面上的變化。
CT-BOX 魔力文字服務申請流程
Step 01:前往 www.ct-box.net 網站,點選右上方「註冊」文字註冊會員。
Step 02:在註冊頁面輸入以下資訊:
- 郵件帳號:接受認證信的電子郵件信箱,同時也是日後登入網站的帳號。
- 設定密碼:登入網站所使用的密碼。
- 密碼確認:在輸入一次登入網站的密碼
- 認證號碼:輸入左側看到的文字或符號
閱讀過使用者條款後勾選方塊後按下下方的「立即註冊」將註冊資訊送出。
※如果有Facebook帳號也可以透過畫面上的「Facebook 登入」以 Facebook 帳號使用該網站服務。
Step 03:畫面將顯示類似下圖畫面,請到剛才填寫的電子郵件信箱收取認證信啟用帳號。
Step 04:點選認證信中的連結完成認證手續,回到 CT-BOX 網站服務內容。
設定CT-BOX魔力文字服務,取得程式碼
Step 01:登入網站後請朋友先點選左方「字型管理:我的文字設定」挑選所要使用的字型,透過拖曳右方的字型樣式到左方的「我的魔力空間」,最後按下「設定完成」就可以了。
※可透過「推薦朋友」連結邀請朋友使用網站服務增加可使用的字型種類。
Step 02:接著請朋友點選左方「網址管理:新增網址」將自己的網站加入服務,使用 Joomla! 的朋友請點選「我要自訂網址」分頁。
Step 03:在「啟用的URL」輸入自己的網站網址,依照頁面說明朋友也可透過輸入「網域名稱」的方式讓二級網址也使用網站服務,輸入完網址後按下畫面下方「加入網址」完成動作。
Step 04:最後一個步驟囉!點選左方「我的:我的Script」項目可以取得接下來要使用的程式碼,點選畫面中「複製到剪貼簿」就可以將程式碼複製起來。
※免費會員提供的網址輸入只有一個,付費會員可以加入更多的網站。
在佈景主題加入程式碼
Step 01:回到 Joomla! 網站後台,選擇「擴充套件:佈景主題管理」。
Step 02:切換到「佈景主題」切頁。
Step 03:選擇要編輯的佈景主題,阿寶以「Phoca Rhein」為例點選「phoca_rhein細節」。
Step 04:點選畫面中「編輯主頁面樣式」文字,編輯佈景主題「index.php」檔案。
Step 05:將程式碼貼在 <body> 上方,然後點選工具列「儲存&關閉」完成動作。
使用自訂字型顯示內容
現在可以在網站內容中使用「CT-BOX魔力文字」服務囉!在需要改變字型的內容以<div> 或<span> 標籤標記起來就可以了。可用的語法如下:
<div class="ct1">使用魔力空間1字型</div>或
<span class="ct2">使用魔力空間2字型</span>
實際呈現方式如下:
後記
「CT-BOX魔力文字」服務開始推廣的時間不長,阿寶一開始要在自己網站上使用時有發生狀況。向網站方面寫信詢問之後很快的得到對方回應,一起找尋問題原因後把狀況排除,也讓阿寶對該網站的服務態度有高評價,推薦給需要的朋友參考^^。(本文章為《使用 Joomla! 1.7 架站的 13 堂課》補充內容)