WIKI使用導(dǎo)航
站長百科導(dǎo)航
站長專題
- 網(wǎng)站推廣
- 網(wǎng)站程序
- 網(wǎng)站賺錢
- 虛擬主機(jī)
- cPanel
- 網(wǎng)址導(dǎo)航專題
- 云計(jì)算
- 微博營銷
- 虛擬主機(jī)管理系統(tǒng)
- 開放平臺
- WIKI程序與應(yīng)用
- 美國十大主機(jī)
Joomla/借助pcDTR插件使用任意字體美化Joomla頁面
很多Joomla用戶想在用 Joomla 建站時(shí)使用更多的字體？盡管CSS 語法允許你為不同的 HTML 元素及其 CSS 類（class）、ID 來選擇各種字體，但是最終會(huì)發(fā)現(xiàn)，在瀏覽器中打開頁面時(shí)，還是沒辦法顯示你想要的那個(gè)特殊字體。
本條目介紹的 pcDTR 插件將允許你在 Joomla 網(wǎng)站上任何位置使用任意字體（無論西文字體還是中文字體），來深入美化你的網(wǎng)站。
什么是pcDTR[ ]
pcDTR是 PHP + CSS Dynamic Text Replacement 這個(gè)字串的縮寫，意思就是：基于 PHP 與 CSS 的動(dòng)態(tài)文本替換技術(shù)。 pcDTR 本來不是專門為 Joomla 而開發(fā)的，它是一個(gè)獨(dú)立的開源程序，可以用于任何 PHP 語言編寫的 web 頁面。
pcDTR 脫胎于之前 Stewart Rosenberger 開發(fā)的 DTR（Dynamic Text Replacement）。接下來，由 R. Marie Cox 將 DTR 改造，成為不依賴于 JavaScript 的版本，就是 pcDTR。不過，原始的 pcDTR 有一些不足，例如：不能對詞匯進(jìn)行換行處理，不能實(shí)現(xiàn)詞匯內(nèi)的 HTML 標(biāo)簽嵌套樣式。于是，Joao Makray 對舊版本的 pcDTR 進(jìn)行了改造，成為我們今天看到的這個(gè)版本。
pcDTR的工作原理[ ]
pcDTR 是對照 CSS 文件來工作的。假如網(wǎng)頁上某個(gè) CSS 對象在 CSS 文件中被指派了字體（font-family），那么 pcDTR 就到自己的 fonts 目錄中尋找對應(yīng)的字體文件，如果找不到，就交給瀏覽器去處理，瀏覽器如果在客戶端電腦上也找不到對應(yīng)字體就會(huì)以全局通用字體或默認(rèn)字體來顯示；
如果 pcDTR 在服務(wù)器端的 fonts 目錄中找到了對應(yīng)的特殊字體，就按照該字體文件對文字外觀的描述，繪制相應(yīng)字號、顏色、粗細(xì)的透明 PNG 圖像，然后使用這個(gè)透明的 PNG 圖像在網(wǎng)頁上作為對應(yīng)文字的背景圖像（background-image）輸出。訪客就看到了美觀的特殊字體。
pcDTR的特點(diǎn)[ ]
用 Photoshop 能把任何字體做到透明的 PNG 或 GIF 圖像上，然后嵌入到網(wǎng)頁中。不過，這種傳統(tǒng)的方式至少有三個(gè)缺點(diǎn)：
- Photoshop 所生成的圖片太大；
- 網(wǎng)頁的源代碼（source code）中并沒有這些文字，不利于搜索引擎優(yōu)化（SEO）；
- 如果要修改圖片上的文字內(nèi)容，必須重新用 PS 修改，再次上傳圖片并覆蓋舊圖片；
pcDTR 完全克服了上述三個(gè)缺點(diǎn)：
- pcDTR 雖然也是以圖片格式輸出，但是圖片體積非常小；
- 網(wǎng)頁上原有的文字不會(huì)消失，只是借助 CSS 技巧使其背景圖片（用特殊字體繪制的相同內(nèi)容文字）突出顯示。如果訪客拖動(dòng)鼠標(biāo)選擇，還能選擇到一字不少的文本內(nèi)容；
- 如果想修改特殊字體部分的內(nèi)容，用戶只需到 Joomla 后臺打開相應(yīng)的文章或模塊，直接修改文字，刷新前臺時(shí) pcDTR 自動(dòng)輸出最新結(jié)果；
pcDTR 插件的用法簡介[ ]
簡單步驟[ ]
- 撰寫文章時(shí)對想要應(yīng)用特殊字體的部分指派特定的 CSS 類或 ID；
- 將字體文件（.ttf 格式）上傳到 /media/pcdtr/fonts/ 這個(gè)目錄；
- 在 CSS 文件中，對目標(biāo)文本指派特殊字體；
- 如果想要改變的文字不在文章內(nèi)容中，比如文章標(biāo)題，或者網(wǎng)站 Logo 文字，或者模塊標(biāo)題，請根據(jù)對象所屬的 CSS 類在 CSS 文件中指派字體；
就這么簡單。實(shí)際上就是三步。如果你懂 CSS，就很容易理解。下面用屏幕截圖來演示一下本文開頭插圖的效果是如何實(shí)現(xiàn)的：
第一步：在 WYSIWYG（所見即所得） 編輯器中輸入文字：
第二步：切換到 HTML 源代碼模式，給目標(biāo)文字指派 CSS 類：
第三步：在 CSS 文件中為目標(biāo)文字指派字體（字體文件已上傳）：
參考來源[ ]
http://www.joomlagate.com/article/joomla15-tutorial/use-any-font-on-joomla-with-pcdtr/