Andrew.Goal's profileAndrew Goal's BlogPhotosBlogListsMore Tools Help

Blog


    August 31

    又更新: Windows XP 下 自己动手打造最理想(舒适 不伤眼)的文本显示效果 让你爱上电脑阅读 关键字 简体-雅黑 繁体-正黑 日语-明瞭体(明了体) 韩语-Malgun Gothic ClearType


    背景知识
    黑体 : 适合显示器,尤其是液晶显示器的字体 笔画平顺 不勾心斗角
    白体(木板印刷体) :大家最熟悉的白体就是宋体了,产生于雕版印刷时代 并不是为了提高显示效果 实际上是为了便于雕版 参见维基百科宋体的起源

    起源

    中国宋代出现了木版印刷,由于当时的中国书籍每 一版印刷两页,使用的是长方形木板雕刻制版。木板具有木纹,一般都是横向,刻制字的横向线条和木纹一致,比较结实;但刻制字的竖向线条时和木纹交叉,容易 断裂。因此字体的竖向线条较粗,横向较细。横向线条即使比较结实,在端点也容易磨损,因此端点也较粗。由此产生了竖粗横细,横线端点有一粗点的宋体字形。

    宋体在宋代就已经产生,但并不成熟,而且宋代崇尚仿书法字体的颜体柳体欧体。一直到代,由于经济因素,占据版面较小的宋体逐渐流行,由于这种字体缺少变化艺术性,被明代文人诟为"匠体字"。宋体字东传至日本,被日本称作明朝体。今天成了汉字文化圈主流的印刷字体。


    黑体 vs 粗体 : 中文语境下 往往混淆 其实完全两码事 参见维基百科

    为什么显示器 尤其是液晶显示器 应该选择黑体 而不是白体(如宋体) 请参考维基百科文章 字体渲染 (英文)
    当年为什么选择了宋体作为windows的默认字体?  因为老外不了解汉字 国人不了解电脑显示器

    终于微软认识到了 黑体才是液晶天下的王道 于是斥巨资打造雅黑 正黑 字体
    顺便表一表 有志者 房骞骞 打造自由开源的的文泉驿正黑体 已成为linux下的主流中文字体 其效果在linux下不逊色于微软雅黑
    (微软雅黑当然也可以在linux使用 但深究起来是违法的)

    下载安装配置雅黑字体的步骤
    1. 字体下载
      • 如果你安装过office 2007 恭喜你 你无需下载安装了直接跳到步骤3 如需繁体 日韩文 继续看
      • 雅黑字体文件也可以从其他电脑的 C:\WINDOWS\Fonts 目录下拷贝到需要雅黑字体电脑的相同目录下 字体文件有两个
        • 微软雅黑 (Truetype) 对应文件名 MSYH.TTF
        • 微软雅黑 bold(Truetype) 对应文件名 MSYHBD.TTF
      • 微软官方下载地址
    2. 字体安装 方法有二:
      1. 将解压好的字体拷贝到C:\WINDOWS\Fonts目录下
      2. 开始->运行->fonts->菜单 文件->安装新字体
    3. ClearType效果开启 需要微软提供的ClearType调优工具 按照向导选择你认为的最理想效果
    4. 标准/清晰设置(截图见附件)
      桌面->右键菜单 属性->显示->效果->使用屏幕字体平滑->选择清晰(默认在标准上)
    5. 平滑字体边角
      我的电脑-右键菜单 属性-高级-性能-可视化效果-选择 平滑屏幕字体边角

    让中文网页黑起来——应用雅黑、正黑显示中文
    • 火狐:工具-选项-内容-字体和颜色-高级 这里是设置针对不同语言使用不同字体的地方 比如选择简体中文 下面的设置就是针对简体中文的 如果选择了繁体中文 下面的设置是针对繁体中文的 如果选择的日文 下面的设置就是针对日文的 如果选择的是韩文 下面的设置就是针对韩文的 字体设置看上去不是那么一目了然 似乎有些复杂 我先给出一种最简单粗暴的设置方法 后面再解释精细设置 以繁体中文为例 其他语言选择上面下载的相应语言 例如简体选择微软雅黑 日文选择明了体 韩文选择Malgun Gothic
      • 简单设置
        • 选择繁体中文(台湾)->等比例字体选择随便->衬线字体选择microsoft jhenghei->无衬线字体选择microsoft jhenghei->等宽字体选择microsoft jhenghei-不选 允许网页选择他们自己的字体-确定
        • 选择繁体中文(香港) 设置和台湾一样
        • 选择简体中文 将繁体中文选择microsoft jhenghei的地方改为选择微软雅黑
        • 日文 韩文设置类似 略
      • 精细设置: 首先需要弄明白几个概念 维基百科上说的很清楚 不赘述
        • 中文环境下 由于是方块字体 所以比例字体的设置没有意义
        • 衬线字体 也就是像宋体那样的白体 上面说过 在液晶时代 这种字体伤眼 所以尽管雅黑 正黑等都是无衬线字体 这里的衬线字体还是选择他们
        • 无衬线字体就是像雅黑 正黑这类黑体字 当然是选择他们
        • 最后等宽字体 中文方块字 都是等宽的 所以对于中文无甚大意义 对于我们程序员有意义 如果你是程序员 可以选择courier new
    • IE设置相对简单 原理和火狐一样
      步骤 工具-Internet选项-常规-字体
      • 选择简体中文-网页字体选择微软雅黑-普通文本字体(也就是火狐所谓的等宽字体)随便(可恨的微软竟然不给你选择雅黑的机会)-确定
      • 选择繁体中文-网页字体选择microsoft jhenghei(也就是正黑)-普通文本字体随便-确定
      • 日韩语言设置 类似 略
      • 如果想强制(笔者推荐)浏览器使用雅黑 正黑 而不是被网页把字体设成宋体 步骤如下:
        工具-Internet选项-常规-辅助功能-忽略字体样式 相当于火狐上的不允许网页选择他们自己的字体
    • 浏览器上使用雅黑 正黑 看网页 适合把字体搞大一点 看起来更舒服 在浏览器上按住ctrl+滚动鼠标滚轮 就可以轻松改变网页字体大小
      但在IE上需要 设置一下 否则对很多网页不起作用 具体步骤为:
      工具-Internet选项-常规-辅助功能-勾选 不使用网页指定的字体大小-确定-确定

    创建雅黑主题——让window xp 雅黑起来

    就是在主题设置那里将宋体一个一个改为雅黑 意义有限 不再赘述

    附件:主要是效果图 和清晰设置的截图






    更新: Windows XP 下 自己动手打造最理想(舒适 不伤眼)的文本显示效果 让你爱上电脑阅读 关键字 简体-雅黑 繁体-正黑 日语-明瞭体(明了体) 韩语-Malgun Gothic ClearType


    背景知识
    黑体 : 适合显示器,尤其是液晶显示器的字体 笔画平顺 不勾心斗角
    白体(木板印刷体) :大家最熟悉的白体就是宋体了,产生于雕版印刷时代 并不是为了提高显示效果 实际上是为了便于雕版 参见维基百科宋体的起源

    起源

    中国宋代出现了木版印刷,由于当时的中国书籍每 一版印刷两页,使用的是长方形木板雕刻制版。木板具有木纹,一般都是横向,刻制字的横向线条和木纹一致,比较结实;但刻制字的竖向线条时和木纹交叉,容易 断裂。因此字体的竖向线条较粗,横向较细。横向线条即使比较结实,在端点也容易磨损,因此端点也较粗。由此产生了竖粗横细,横线端点有一粗点的宋体字形。

    宋体在宋代就已经产生,但并不成熟,而且宋代崇尚仿书法字体的颜体柳体欧体。一直到代,由于经济因素,占据版面较小的宋体逐渐流行,由于这种字体缺少变化艺术性,被明代文人诟为"匠体字"。宋体字东传至日本,被日本称作明朝体。今天成了汉字文化圈主流的印刷字体。


    黑体 vs 粗体 : 中文语境下 往往混淆 其实完全两码事 参见维基百科

    为什么显示器 尤其是液晶显示器 应该选择黑体 而不是白体(如宋体) 请参考维基百科文章 字体渲染 (英文)
    当年为什么选择了宋体作为windows的默认字体?  因为老外不了解汉字 国人不了解电脑显示器

    终于微软认识到了 黑体才是液晶天下的王道 于是斥巨资打造雅黑 正黑 字体
    顺便表一表 有志者 房骞骞 打造自由开源的的文泉驿正黑体 已成为linux下的主流中文字体 其效果在linux下不逊色于微软雅黑
    (微软雅黑当然也可以在linux使用 但深究起来是违法的)

    下载安装配置雅黑字体的步骤
    1. 字体下载
      • 如果你安装过office 2007 恭喜你 你无需下载安装了直接跳到步骤3 如需繁体 日韩文 继续看
      • 雅黑字体文件也可以从其他电脑的 C:\WINDOWS\Fonts 目录下拷贝到需要雅黑字体电脑的相同目录下 字体文件有两个
        • 微软雅黑 (Truetype) 对应文件名 MSYH.TTF
        • 微软雅黑 bold(Truetype) 对应文件名 MSYHBD.TTF
      • 微软官方下载地址
    2. 字体安装 方法有二:
      1. 将解压好的字体拷贝到C:\WINDOWS\Fonts目录下
      2. 开始->运行->fonts->菜单 文件->安装新字体
    3. ClearType效果开启 需要微软提供的ClearType调优工具 按照向导选择你认为的最理想效果
    4. 标准/清晰设置(截图见附件)
      桌面->右键菜单 属性->显示->效果->使用屏幕字体平滑->选择清晰(默认在标准上)
    5. 平滑字体边角
      我的电脑-右键菜单 属性-高级-性能-可视化效果-选择 平滑屏幕字体边角

    让中文网页黑起来——应用雅黑、正黑显示中文
    • 火狐:工具-选项-内容-字体和颜色-高级 这里是设置针对不同语言使用不同字体的地方 比如选择简体中文 下面的设置就是针对简体中文的 如果选择了繁体中文 下面的设置是针对繁体中文的 如果选择的日文 下面的设置就是针对日文的 如果选择的是韩文 下面的设置就是针对韩文的 字体设置看上去不是那么一目了然 似乎有些复杂 我先给出一种最简单粗暴的设置方法 后面再解释精细设置 以繁体中文为例 其他语言选择上面下载的相应语言 例如简体选择微软雅黑 日文选择明了体 韩文选择Malgun Gothic
      • 简单设置
        • 选择繁体中文(台湾)->等比例字体选择随便->衬线字体选择microsoft jhenghei->无衬线字体选择microsoft jhenghei->等宽字体选择microsoft jhenghei-不选 允许网页选择他们自己的字体-确定
        • 选择繁体中文(香港) 设置和台湾一样
        • 选择简体中文 将繁体中文选择microsoft jhenghei的地方改为选择微软雅黑
        • 日文 韩文设置类似 略
      • 精细设置: 首先需要弄明白几个概念 维基百科上说的很清楚 不赘述
        • 中文环境下 由于是方块字体 所以比例字体的设置没有意义
        • 衬线字体 也就是像宋体那样的白体 上面说过 在液晶时代 这种字体伤眼 所以尽管雅黑 正黑等都是无衬线字体 这里的衬线字体还是选择他们
        • 无衬线字体就是像雅黑 正黑这类黑体字 当然是选择他们
        • 最后等宽字体 中文方块字 都是等宽的 所以对于中文无甚大意义 对于我们程序员有意义 如果你是程序员 可以选择courier new
    • IE设置相对简单 原理和火狐一样
      步骤 工具-Internet选项-常规-字体
      • 选择简体中文-网页字体选择微软雅黑-普通文本字体(也就是火狐所谓的等宽字体)随便(可恨的微软竟然不给你选择雅黑的机会)-确定
      • 选择繁体中文-网页字体选择microsoft jhenghei(也就是正黑)-普通文本字体随便-确定
      • 日韩语言设置 类似 略
      • 如果想强制(笔者推荐)浏览器使用雅黑 正黑 而不是被网页把字体设成宋体 步骤如下:
        工具-Internet选项-常规-辅助选项-忽略字体样式 相当于火狐上的不允许网页选择他们自己的字体

    创建雅黑主题——让window xp 雅黑起来

    就是在主题设置那里将宋体一个一个改为雅黑 意义有限 不再赘述

    附件:主要是效果图 和清晰设置的截图





    August 30

    Windows XP 下 自己动手打造最理想(舒适 不伤眼)的文本显示效果 让你爱上电脑阅读 关键字 简体-雅黑 繁体-正黑 日语-明瞭体(明了体) 韩语-Malgun Gothic ClearType

    背景知识
    黑体 : 适合显示器,尤其是液晶显示器的字体 笔画平顺 不勾心斗角
    白体(木板印刷体) :大家最熟悉的白体就是宋体了,产生于雕版印刷时代 并不是为了提高显示效果 实际上是为了便于雕版 参见维基百科宋体的起源

    起源

    中国宋代出现了木版印刷,由于当时的中国书籍每 一版印刷两页,使用的是长方形木板雕刻制版。木板具有木纹,一般都是横向,刻制字的横向线条和木纹一致,比较结实;但刻制字的竖向线条时和木纹交叉,容易 断裂。因此字体的竖向线条较粗,横向较细。横向线条即使比较结实,在端点也容易磨损,因此端点也较粗。由此产生了竖粗横细,横线端点有一粗点的宋体字形。

    宋体在宋代就已经产生,但并不成熟,而且宋代崇尚仿书法字体的颜体柳体欧体。一直到代,由于经济因素,占据版面较小的宋体逐渐流行,由于这种字体缺少变化艺术性,被明代文人诟为"匠体字"。宋体字东传至日本,被日本称作明朝体。今天成了汉字文化圈主流的印刷字体。


    黑体 vs 粗体 : 中文语境下 往往混淆 其实完全两码事 参见维基百科

    为什么显示器 尤其是液晶显示器 应该选择黑体 而不是白体(如宋体) 请参考维基百科文章 字体渲染 (英文)
    当年为什么选择了宋体作为windows的默认字体?  因为老外不了解汉字 国人不了解电脑显示器

    终于微软认识到了 黑体才是液晶天下的王道 于是斥巨资打造雅黑 正黑 字体
    顺便表一表 有志者 房骞骞 打造自由开源的的文泉驿正黑体 已成为linux下的主流中文字体 其效果在linux下不逊色于微软雅黑
    (微软雅黑当然也可以在linux使用 但深究起来是违法的)

    下载安装配置雅黑字体的步骤
    1. 字体下载
      • 如果你安装过office 2007 恭喜你 你无需下载安装了直接跳到步骤3 如需繁体 日韩文 继续看
      • 微软官方下载地址
    2. 字体安装:
      1. 方法一:开始->运行->fonts->菜单 文件->安装新字体
      2. 方法二: 将解压好的字体拷贝到C:\WINDOWS\Fonts目录下
    3. ClearType效果开启 需要微软提供的ClearType调优工具 按照向导选择你认为的最理想效果
    4. 标准/清晰设置(截图见附件)
      桌面->右键菜单 属性->显示->效果->使用屏幕字体平滑->选择清晰(默认在标准上)
    5. 平滑字体边角
      我的电脑-右键菜单 属性-高级-性能-可视化效果-选择 平滑屏幕字体边角

    让中文网页黑起来——应用雅黑、正黑显示中文
    • 火狐:工具-选项-内容-字体和颜色-高级 这里是设置针对不同语言使用不同字体的地方 比如选择简体中文 下面的设置就是针对简体中文的 如果选择了繁体中文 下面的设置是针对繁体中文的 如果选择的日文 下面的设置就是针对日文的 如果选择的是韩文 下面的设置就是针对韩文的 字体设置看上去不是那么一目了然 似乎有些复杂 我先给出一种最简单粗暴的设置方法 后面再解释精细设置 以繁体中文为例 其他语言选择上面下载的相应语言 例如简体选择微软雅黑 日文选择明了体 韩文选择Malgun Gothic
      • 简单设置
        • 选择繁体中文(台湾)->等比例字体选择随便->衬线字体选择microsoft jhenghei->无衬线字体选择microsoft jhenghei->等宽字体选择microsoft jhenghei-不选 允许网页选择他们自己的字体-确定
        • 选择繁体中文(香港) 设置和台湾一样
        • 选择简体中文 将繁体中文选择microsoft jhenghei的地方改为选择微软雅黑
        • 日文 韩文设置类似 略
      • 精细设置: 首先需要弄明白几个概念 维基百科上说的很清楚 不赘述
        • 中文环境下 由于是方块字体 所以比例字体的设置没有意义 衬线字体 也就是像宋体那样的白体
        • 上面说过 在液晶时代 这种字体伤眼 所以尽管雅黑 正黑等都是无衬线字体 这里的衬线自己还是选择他们
        • 衬线字体就是像雅黑 正黑这类黑体字 当然是选择他们
        • 最后等宽字体 中文方块字 都是等宽的 所以对于中文无甚大意义 对于我们程序员有意义 如果你是程序员 可以选择courier new
    • IE设置相对简单 原理和火狐一样
      步骤 工具-Internet选项-常规-字体
      • 选择简体中文-网页字体选择微软雅黑-普通文本字体随便(可恨的微软竟然不给你选择雅黑的机会)-确定
      • 选择繁体中文-网页字体选择microsoft jhenghei(也就是正黑)-普通字体随便-确定
      • 日韩语言设置 类似 略
      • 如果想强制浏览器使用雅黑 正黑(推荐) 而不是被网页把自己设成宋体 步骤如下:
        工具-Internet选项-常规-辅助选项-忽略字体样式

    创建雅黑主题——让window xp 雅黑起来

    就是在主题设置那里将宋体一个一个改为雅黑 意义有限 不再赘述

    附件:主要是效果图 和清晰设置的截图




    August 14

    用P标签当容器,在IE上及其危险

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

    <html>
    <head>
        <title>Untitled</title>
    </head>

    <body>

    <button onclick="btnClickHandler()">用P标签当容器,在IE上及其危险</button>
    <p id="GouP">
    </p>

    </body>
    </html>
    <script>
    function btnClickHandler(){
        document.getElementById('GouP').innerHTML='<div>asfsdafas</div>';    //只要是block元素,就会有问题
        //document.getElementById('GouP').innerHTML='<span>asfsdafas</span>'; //inline元素就没有问题
    }
    </script>