在浏览器中以文本方式显示nfo文件的完美解决方案

February 27, 2005 at 1:31 am · Filed under Develop

关键字：nfo nfo2txt nfo2pic opentype Microsoft weft css font-face ie firefox 文件 浏览器 显示 浏览 查看 图片

需要nfo2pic的同学，从此处下载源代码：http://www.ugia.cn/wp-data/nfo2pic.rar

更新：请查看 nfo2html 来解决网页编码问题

通常我们都是在浏览器中以图片方式显示nfo，有优点也有缺点。优点先不说了，最大的缺点就是不能够进行选择、复制等操作。在浏览器中以文本方式显示nfo，除了安装特定的字体外，似乎目前还没有更好的方法。

以前我曾经写过一个nfo2txt的小程序，就是把nfo文件中的特殊字符进行转化，在记事本中用等宽字体（如courier new）浏览正常，但在IE中确是一团糟，具体什么原因我不清楚，不过在firefox浏览器中却可以正常显示。

一直在找一种能够显示nfo的TrueType字体，因为可以把它转化为嵌入html的字体在浏览器中使用。昨天我在Hanzac@ccf写的基于 HTA 的 NFO 查看工具中找到了Lucida ConsoleP这款字体，把它转化成了OpenType字体（压缩的TrueType字体），在IE中显示正常，在firefox中却没有效果。这种方式的缺点就是浏览器下载字体需要一段时间。

下面一段小程序，可以根据不同的浏览器而使用不同的方法显示nfo，在IE和firefox下似乎还没有发现什么问题。
演示地址：http://www.ugia.cn/nfo/nfo.php

<?php
$nfodata = file_get_contents("ror.nfo");
$nfodata = str_replace("\r", "", $nfodata);
$nfodata = preg_replace("/(^|\s)(www\.\S+)|(^|\s)((http|ftp|https):\/\/\S+)/is", " <a href=\"$2$4\">$2$4</a>", $nfodata);

if (strstr($_SERVER['HTTP_USER_AGENT'], "MSIE"))  //如果客户端浏览器为IE
{
    header('Content-Type: text/html; charset=windows-1252 ');
    $ctype = "<meta http-equiv=\"Content-Type\" content=\"text/html; charset=windows-1252\">";
    $style = "
        @font-face {
            font-family: ugia;
            font-style:  normal;
            font-weight: normal;
            src: url(http://0day.ugia.net/ugia.eot);
        }
        
        body, a, pre {
            font-family: ugia, courier new;
            font-size:11px;
        }";
}
else //其他浏览器
{
    header('Content-Type: text/html; charset=utf-8 ');
    $ctype = "<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\">";
    $style = "
        body, a, pre {
            font-family: courier new;
            font-size:11px;
        }";
    
    require("nfo2txt.php");
    $nfodata = conv_nfo($nfodata);
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title>nfo file</title>
  <style type="text/css">
  <?=$style?>
  </style>
</head>
<body>
  <pre>
  <?=$nfodata?>
  </pre>
</body>
</html>

附件中包含nfo2txt.php和luconp.ttf这两个文件，需要把luconp.ttf使用微软的WEFT转化为.eot文件，我不知道如何去除eot文件的站点限制，所以需要你自己转化并指定使用此eot文件的地址了。Microsoft WEFT下载地址：
http://download.microsoft.com/download/8/a/1/8a1be03f-f7fc-4504-af9a-7b9230775284/WEFTIII2b1.exe

css2种关于@font-face 这个规则的说明：

@font-face { font-family : name ; src : url( url ) ; sRules }

说明：
name : 　字体名称
url : 　使用绝对或相对地址指定OpenType字体
sRules : 　样式表定义

设置嵌入HTML文档的字体。
嵌入HTML文档的字体是指将OpenType字体（压缩的TrueType字体）文件映射到客户端系统，用来提供HTML文档使用该字体，或取代客户端系统已有的同名字体。

示例：
@font-face { font-family: dreamy; font-weight: bold; src: url(http://www.example.com/font.eot); }

附件：http://www.ugia.cn/nfo/nfo2txt.rar

原创文章，转载请注明出处

34 Comments »

  1. joe said,

    March 4, 2005 @ 10:40 pm

    doesn’t work on IE, even the luconp font is displayed correctly, the special characters are till a mess..

    Dont know why

  2. legend said,

    March 5, 2005 @ 12:43 am

    create the eot file from luconp.ttf use Microsoft WEFT, and add your site url to the allow url list . try again!

  3. Gerry said,

    March 7, 2005 @ 2:33 pm

    I aways use DAMN_NFO_Viewer. It’s pretty good! U can have a try!!!

  4. Vidar said,

    March 25, 2005 @ 4:59 pm

    “把它转化成了OpenType字体（压缩的TrueType字体）”

    您好，请问是用什么软件压缩的？谢谢了

  5. legend said,

    March 26, 2005 @ 12:20 am

    Microsoft WEFT,我文章后面已经写的很清楚了。

  6. nfo said,

    April 3, 2005 @ 11:20 pm

    这个并不完美，依赖于网页的字符集，能否有一个不依赖于字符集的办法

  7. nfo said,

    April 3, 2005 @ 11:23 pm

    我见过只依赖luconp.ttf的实现，不知道怎么弄，主人这方面很有经验，能否介绍一下。

  8. legend said,

    April 4, 2005 @ 12:42 am

    据我所知，大多数win下的ttf字体都包含那些经过nfo2txt转化过的特殊字符。

    用luconp.ttf实现的话，需要客户端手动安装这个字体才能使用。用eot相当于让ie自动下载并使用这种嵌入式字体。

  9. nfo said,

    April 5, 2005 @ 9:42 pm

    你好，legend,我从头到尾试过你的例子了，用windows-1252可以正确显示，不管在ie还是firefox,但是用utf-8,都不行
    一个网站的字符集缺省应该是固定的，不可能为了迁就windows-1252把整个网站都改为这种字符集，这样nfo是可以显示了
    但是其他就变成的乱码，显然不是一个好的办法
    我所说的只依赖luconp.ttf的实现大概是这样的
    下面是nfo的片断

    苘苘哌圹圹圹哌 苘圹?
    苘苒圻甙苘圻? 苒圹圻
    苘苒哌弑鞍苘圻 苘圹圹圹
    苘圻哌 鞍败苒? 苒圻弑北圻
    苘圻? 卑鞍苒哌 苘苒? 北圻
    苒哌 鞍败苒? 苘圻北 氨圹 ?
    苒? 北避苒? 苒圹圮? 北臂? 安膊?

    这种实现将这些字符转换成网页的特殊字符，然后使用该字体显示，但是具体如何转换，就是关键所在，这是我不清楚的地方，你给出的将ascii转换成utf-8
    显然是不行的，但是以你的经验，如何将ascii的字符转换成网页的特殊字符，应该是简单的，这也是我的疑问。
    下面给出的是转换后的字符，供你参考，希望你能再接再厉，把这个问题真的完美化。
    这种实现应该是比较好的，就好像要在网页上看pdf文件，每个客户端都要装个Acrobat Reader,这是合理的，也是客户端用户完全能够接受的
    但是不停的换字符集，谁也不能接受的，你说对吧?

    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


                                 ÜÜÜÜßßÛÛÛÛÛÛßß           ÜÜÛÛß    
                            ÜÜÜÛÛßß ÜÜÛßß              ÜÛÛÛÛß      
                       ÜÜÜÛßßß   ÜÜÛß              ÜÜÛÛÛÛÛÛ        
                   ÜÜÛßßß     ÜÜÛß              ÜÛÛßß   Ûß         
               ÜÜÛßß       ÜÛßß             ÜÜÜÛ      Ûß           
            ÜÛßß        ÜÜÛß             ÜÜÛß       ÛÛ                  
          ÜÛß        ÜÜÛß             ÜÛÛÛÛÜ       Ûß                


    能看到你回应我的问题，:D

  10. nfo said,

    April 5, 2005 @ 9:43 pm

    你的发帖功能把我列的例子的字符都排不好，还请细看html的source code，谢谢!

  11. nfo said,

    April 5, 2005 @ 10:02 pm

    重新发一遍，看看格式对不对，如果还是一样，请删除

    if (preg_match(“/$admincpdir/i”, $_SERVER['HTTP_REFERER']) OR (VB_AREA ==’AdminCP’))
    {
    $cookieprefix = ‘acp_’.$cookieprefix;
    }

    你好，legend,我从头到尾试过你的例子了，用windows-1252可以正确显示，不管在ie还是firefox,但是用utf-8,都不行
    一个网站的字符集缺省应该是固定的，不可能为了迁就windows-1252把整个网站都改为这种字符集，这样nfo是可以显示了
    但是其他就变成的乱码，显然不是一个好的办法
    我所说的只依赖luconp.ttf的实现大概是这样的
    下面是nfo的片断

    苘苘哌圹圹圹哌 苘圹?
    苘苒圻甙苘圻? 苒圹圻
    苘苒哌弑鞍苘圻 苘圹圹圹
    苘圻哌 鞍败苒? 苒圻弑北圻
    苘圻? 卑鞍苒哌 苘苒? 北圻
    苒哌 鞍败苒? 苘圻北 氨圹 ?
    苒? 北避苒? 苒圹圮? 北臂? 安膊?

    这种实现将这些字符转换成网页的特殊字符，然后使用该字体显示，但是具体如何转换，就是关键所在，这是我不清楚的地方，你给出的将ascii转换成utf-8
    显然是不行的，但是以你的经验，如何将ascii的字符转换成网页的特殊字符，应该是简单的，这也是我的疑问。
    下面给出的是转换后的字符，供你参考，希望你能再接再厉，把这个问题真的完美化。
    这种实现应该是比较好的，就好像要在网页上看pdf文件，每个客户端都要装个Acrobat Reader,这是合理的，也是客户端用户完全能够接受的
    但是不停的换字符集，谁也不能接受的，你说对吧?


    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


                                 ÜÜÜÜßßÛÛÛÛÛÛßß           ÜÜÛÛß    
                            ÜÜÜÛÛßß ÜÜÛßß              ÜÛÛÛÛß      
                       ÜÜÜÛßßß   ÜÜÛß              ÜÜÛÛÛÛÛÛ        
                   ÜÜÛßßß     ÜÜÛß              ÜÛÛßß   Ûß         
               ÜÜÛßß       ÜÛßß             ÜÜÜÛ      Ûß           
            ÜÛßß        ÜÜÛß             ÜÜÛß       ÛÛ                  
          ÜÛß        ÜÜÛß             ÜÛÛÛÛÜ       Ûß                


    很高兴能看到你回应我的问题，:D

  12. legend said,

    April 6, 2005 @ 8:34 am

    不太明白你说的意思。这样吧，你加我msn: legendsky [at] hotmail [dot] com

  13. nfo said,

    April 6, 2005 @ 3:48 pm

    意思是nfo文件里的字符都是ascii码，然后html里的字符有html的转义字符表示，比如空格是  那就可以将ascii里的空格通过你那类似ascii转utf-8的php程序转成html的特殊字符 ，然后其他字符也用同样的处理方法，最后得到是转换后的html字符，再通过luconp.ttf显示这些html字符，就可以得到图形化的效果，关键就是如何将ascii的特殊字符完全转化成html的特殊字符，就如我给出的例子，上部分是ascii的字符，由于你的网页显示的问题，没有正确显示出来，下面是经过转换后的html特殊字符，然后用luconp.ttf就可以正常显示了，因为你blog不能传图片，不然我可以将例子用图片表达一下，那样更清楚。

  14. nfo said,

    April 6, 2005 @ 3:49 pm

     html的空格 (nbsp;)

  15. legend said,

    April 6, 2005 @ 10:32 pm

    你说的是html实体,nfo文件里的内容不需要转化即可用luconp.ttf正常显示，而且也不需要改变什么你说的“编码”。

    用nfo2txt转化过后的,charset必须为utf-8才能在firefox等非IE中正常显示！

  16. nfo said,

    April 7, 2005 @ 1:38 am

    http://www.ugia.cn/nfo/nfo.php 你这个例子，你在IE换一个编码（不是html指定的windows编码),比如改为GB2312就不行了，显示马上就不正确了，不信你自己可以试试，而我说的ascii转换成html实体后，不管用什么编码，都可以正确显示的，你查看本网页的html code,找到我我举的那个例子试试就清楚了,可能我的表达能力不好，说了这么多都没表达清楚，抱歉!

  17. 瑞柯坤泰 said,

    April 7, 2005 @ 8:54 am

    ttf字体都包含那些经过nfo2txt转化过的特殊字符

  18. shw1395 said,

    May 10, 2005 @ 9:56 pm

    还是图片最省事，字体不可能兼容所有系统（包括浏览器等），legend应该把时间花在效率最高的事情上，象围棋一样，拣最大的下。小伙子加油，我在关注你，有搞头哦：）

  19. andot said,

    May 13, 2005 @ 4:17 pm

    按照楼上的说法，所有的网页都该做成图片。但是如果真的搞成图片，你用字符界面的浏览器就什么也看不到了。

  20. legend said,

    May 13, 2005 @ 9:33 pm

    to:shw1395
    图片的已经很成熟了，也很简单，没有研究的必要了, 呵呵

  21. 潇洒 said,

    May 30, 2005 @ 2:23 am

    偶昨天的回复都没了?

  22. legend said,

    May 30, 2005 @ 3:46 am

    啊？我是27号晚上备份的数据库，28号改版改了一天，在本地机器上改的，29号早上上传改过的程序及数据库，疏忽了，你昨天都说什么了？

  23. lab9 said,

    November 4, 2006 @ 2:48 pm

    legend 你好
    #
    legend said,
    图片的已经很成熟了，也很简单，没有研究的必要了, 呵呵

    你说的是谁写的程序?
    国外那些0DAY站的程序是挺成熟
    但是我还是没找到这些完美的代码

    我发现的代码就有一个Hessian写的,但是他的程序生成的图片里的文字部分都不是清晰的,带毛边 ,是字体的原因还是什么?
    现在世界上还有没有其他开放代码的NFO2PIC?

    我不是程序员,但喜欢收集有意思的代码,之所以想用2PIC而不是更人性的2TXT,是因为我想做的是收集”NFO…ART”的站点,而不是”NFO…INFO”,所以图片更适合我,当然发布NFO信息选用”2TXT”就很恰当了

  24. lab9 said,

    November 4, 2006 @ 3:45 pm

    对了 如果了解了这个原理是不是用FLASH也可以完美显示NFO? 用FLASH的嵌入字体是不是方便点
    但是我找到一个用FLASH解决的,http://oos.moxiecode.com/nfo_reader/index.html
    但显示不正常 不知道是不是自身的原因

  25. lab9 said,

    November 4, 2006 @ 4:15 pm

    还有一个忘问了 你的 在线制作eot字体:http://www.ugia.cn/nfo/eot.php 没了 还有在线的版本么?

  26. legend said,

    November 5, 2006 @ 1:29 am

    我说nfo2pic成熟是因为这个东西我已经做过了，确实已纪很完美了。
    你可以看看我前面的一些论坛插件，nfo2pic for vbb3, nfo2pic for ipb2.x等等，里面有代码。现在网上这些nfo2pic论坛插件基本都是基于我那个版本改的。字体也是用我们制作的。

    http://www.ugia.cn/nfo/eot.php这个因为换了服务器，不能用了。你可以把网址告诉我，我给你制作。

  27. lab9 said,

    November 5, 2006 @ 7:51 pm

    啊 你那个nfo2pic for vbb3确实很完美 ， 文字没有毛边， 不懂PHP，费了半天劲装了个VBB才看见的，LEGEND能不能忙里偷闲提示一下怎么做能把这个脱离开VBB 直接显示，就像NFO2TXT那样，另外.DFT是什么 字体格式阿，用什么生成的 ，搜了半天没有搜到 都是什么模具 硬盘数据相关的内容

    /eot.php 没有在线的就算了
    呵呵 谢谢了

  28. legend said,

    November 5, 2006 @ 8:58 pm

    我整理了下源代码，打了个包，从这里下载：http://www.ugia.cn/wp-data/nfo2pic.rar

    dft文件扩展名是我们自己随便定义的，当然搜不到，大致意思是：Dot Font Type。

  29. lab9 said,

    November 6, 2006 @ 12:51 am

    哈哈 你很有耐心 谢谢了

  30. canadian pharmacy said,

    December 20, 2006 @ 9:05 am

    Dana whimpering dwellers,sneakily?blink!… Thanks!!!

  31. bet said,

    December 26, 2006 @ 6:54 am

    Thanks for a lovely site, I am very impressed :-)

  32. 北京翻译公司同声传译 said,

    August 19, 2007 @ 10:19 am

    很好

  33. rubby said,

    November 23, 2007 @ 1:11 am

    спосибо чинасы!

  34. Cadwaylodia said,

    January 14, 2008 @ 6:28 pm

    Hi people!!! I want introduce my [url=http://www.xrum.977mb.com]new year foto[/url]

RSS feed for comments on this post

Leave a Comment