你是否想在用 Joomla 建站时使用更多的字体？尽管 CSS 语法允许你为不同的 HTML 元素及其 CSS 类（class）、ID 来选择各种字体，但是最终你会发现，在浏览器中打开页面时，还是没办法显示你想要的那个特殊字体。比如说：爱好书法的你，想在文章中演示一下“颜体”文字，用 CSS 的 font 指令能做到吗？不能。众所周知，要在网页上显示特殊的字体，只能在 Photoshop 里面用该字体做成图片，然后插入到页面中。

今天，这个痛苦的经历将不再发生。本文介绍的 pcDTR 插件将允许你在 Joomla 网站上任何位置使用任意字体（无论西文字体还是中文字体），来深入美化你的网站。准确的说，pcDTR 技术诞生有一段时间了，Joomla之门最近才发现了这个宝贝。真是相见恨晚。我认为 pcDTR 对于 Joomla 的意义就如同“蒸汽机的发明”对于工业革命的意义。有这么厉害吗？那就听我慢慢道来。

注意：我希望阅读本文的你，至少了解一些 CSS (Cascade Style Sheets，层叠样式表)的基础知识。否则你学习起来会很费劲。如果不知道 CSS 为何物，请离开此页面，先去学习 CSS 有关知识。完后再来阅读本文。

什么是 pcDTR ？

pcDTR 是 PHP + CSS Dynamic Text Replacement 这个字串的缩写，意思就是：基于 PHP 与 CSS 的动态文本替换技术。 pcDTR 本来不是专门为 Joomla 而开发的，它是一个独立的开源程序，可以用于任何 PHP 语言编写的 web 页面。

pcDTR 脱胎于之前 Stewart Rosenberger 开发的 DTR（Dynamic Text Replacement）。接下来，由 R. Marie Cox 将 DTR 改造，成为不依赖于 JavaScript 的版本，就是 pcDTR。不过，原始的 pcDTR 有一些不足，例如：不能对词汇进行换行处理，不能实现词汇内的 HTML 标签嵌套样式。于是，Joao Makray 对旧版本的 pcDTR 进行了改造，成为我们今天看到的这个版本。

如果你访问了上面给出的 pcDTR 源程序在 Google Code 的官方页面，就会发现这个脚本并不是那么容易使用的。因此 flowman（otherland.se 站长）以 pcDTR 为核心，重新打包，制作成为 pcDTR for Joomla 1.5 这样一个标准插件。本文要说的，就是 pcDTR 插件。

pcDTR 的工作原理

pcDTR 是对照 CSS 文件来工作的。假如网页上某个 CSS 对象在 CSS 文件中被指派了字体（font-family），那么 pcDTR 就到自己的 fonts 目录中寻找对应的字体文件，如果找不到，就交给浏览器去处理，浏览器如果在客户端电脑上也找不到对应字体就会以全局通用字体或默认字体来显示；如果 pcDTR 在服务器端的 fonts 目录中找到了对应的特殊字体，就按照该字体文件对文字外观的描述，绘制相应字号、颜色、粗细的透明 PNG 图像，然后使用这个透明的 PNG 图像在网页上作为对应文字的背景图像（background-image）输出。访客就看到了美观的特殊字体。

本文前面第一幅插图演示了 pcDTR 分别针对文章标题和正文的字体替换效果。图片上所展示的特殊字体都是由对应的字体文件（.ttf 格式）实现的。

pcDTR 对网站有什么好处？

你也知道，用 Photoshop 能把任何字体做到透明的 PNG 或 GIF 图像上，然后嵌入到网页中。不过，这种传统的方式至少有三个缺点：

1. Photoshop 所生成的图片太大；
2. 网页的源代码（source code）中并没有这些文字，不利于搜索引擎优化（SEO）；
3. 如果要修改图片上的文字内容，必须重新用 PS 修改，再次上传图片并覆盖旧图片；

针对第二个缺点，您也许会说：可以通过图像（IMG）元素的 ALT 及 Title 属性来添加同样内容的文本，以利 SEO。但是，我必须提醒您：ALT 及 Title 的地位，与页面正文相比，哪个在 SEO 方面的权重更大？而且，在图像的 ALT 或 Title 中输入的文字，只有助于“搜索图片”，而不是有助于“搜索文章”。

pcDTR 完全克服了上述三个缺点：

1. pcDTR 虽然也是以图片格式输出，但是图片体积非常小，如下图所示；
2. 网页上原有的文字不会消失，只是借助 CSS 技巧使其背景图片（用特殊字体绘制的相同内容文字）突出显示。如果访客拖动鼠标选择，还能选择到一字不少的文本内容；
3. 如果想修改特殊字体部分的内容，用户只需到 Joomla 后台打开相应的文章或模块，直接修改文字，刷新前台时 pcDTR 自动输出最新结果；

从上图可以看出，pcDTR 输出的 PNG 图像体积非常小。这有利于快速打开页面。

从上图可以看出，在页面源代码中，依然保留着同样内容的文本（Text），因此非常有利于 SEO。

pcDTR 插件的用法简介

pcDTR 源代码的使用相当复杂，现在有了 pcDTR for Joomla 插件，就非常简单了。最简单的用法是：下载 pcDTR 插件，直接到 Joomla 1.5 后台安装，然后启用此插件。无需再做任何操作，现在你去看网站前台，是不是发现所有的文章标题都已变了一种字体？这是 pcDTR 自带的 Brody 字体。

注意：Brody 字体是英文字体，无法对中文文字进行渲染。所以你可能会看到文章标题中的中文字符都“丢失”了，不必惊慌，我们下面换用中国人的字体来玩一遍。

pcDTR 插件用法简单步骤：

1. 撰写文章时对想要应用特殊字体的部分指派特定的 CSS 类或 ID；
2. 将字体文件（.ttf 格式）上传到 /media/pcdtr/fonts/ 这个目录；
3. 在 CSS 文件中，对目标文本指派特殊字体；
4. 如果想要改变的文字不在文章内容中，比如文章标题，或者网站 Logo 文字，或者模块标题，请根据对象所属的 CSS 类在 CSS 文件中指派字体；

就这么简单。实际上就是三步。如果你懂 CSS，就很容易理解。下面用屏幕截图来演示一下本文开头插图的效果是如何实现的：

第一步：在 WYSIWYG 编辑器中输入文字：

第二步：切换到 HTML 源代码模式，给目标文字指派 CSS 类：

第三步：在 CSS 文件中为目标文字指派字体（字体文件已上传）：

注意：我在测试时直接修改了 pcDTR 自带的 CSS 文件（/media/pcdtr/css/styles.css），你也可以在当前 Joomla 模板的 CSS 中定义。

这样就完成了。刷新网站前台，就能看到本文第一张插图那样的效果了。

pcDTR 插件不是完美的

在测试过程中，Joomla之门也发现 pcDTR 插件还存在一些不足。例如：

1. 字体文件名必须是英文，可以含空格，但不能用中文。比方说，你从网上下载到的字体文件是“华文行草.ttf”，这样上传后是不能被识别的，必须修改为 huawenxingcao.ttf 上传，在 CSS 文件中也使用这个英文名称。
2. 并非支持全部的中文字体。例如“金梅海报面包体”、“金梅海报大豆豆体”等若干字体，不能生效。我们不是研究字体文件的，所以无法得知具体原因。相信随着 pcDTR 技术的完善，这个问题将来也能解决。
3. pcDTR 渲染过程消耗服务器资源较大。由于 pcDTR 是“动态替换”，每次刷新页面都会重新生成 PNG 图像，因此对服务器资源消耗较大。幸好 pcDTR 插件提供了“缓存”参数，强烈建议使用缓存。否则网站会被 pcDTR 拖慢。
4. 不支持 PDF 输出。不论是点击 Joomla 文章系统自带的 PDF 按钮，还是使用客户端电脑上安装的 PDF 虚拟打印机（例如 PDF factory），最终生成的 PDF 文档都丢失了特殊字体效果，而是以默认字体（宋体）来显示。

pcDTR 与 sIFR 谁更好？

sIFR 是 Scalable Inman Flash Replacement 的缩写。也是一种动态文本替换技术。 sIFR 也能实现与 pcDTR 类似的效果，下面简单比较一下这两种技术：

目前打包 sIFR 的 Joomla 插件有两个，一个名为 sIFR，有一年多没更新了，而且要求用户安装之后还要手动给模板文件插入代码，略过；另一个插件名为 JsIFR3，分免费版和 Pro 版两个版本。其免费版只能应用一种字体（尽管安装包带了多个字体，但是你只能选一个），JsIFR3 Pro 版是收费软件，可以允许自由选择字体。

我最痛恨 sIFR 的地方在于，它不是直接支持 .ttf 格式字体文件，而是要制作专门的 .swf 文件。看到这里我就放弃了。哪有功夫去学习这么复杂的技术！更何况 JsIFR3 Pro 还收费，我更没兴趣测试了。有免费的 pcDTR 干嘛不用呢？

JsIFR3 要求客户端必须安装 Flash 播放器。尽管大多数网民已经安装了，但多出这么一个要求，总是不爽。pcDTR 输出 PNG 图像，任何浏览器都支持。

因此：最终结论是—— pcDTR 远远胜过 JsIFR3！

下载 pcDTR for J1.5 自定义字体插件 v3.1.6 多国语言版

文件标题: pcDTR for J1.5 自定义字体插件 v3.1.6 多国语言版 (Details) 文件类型: zip 版本: 3.1.6 文件大小: 60 Kb 下载次数: 210