果你接触过Mac，或多或少会被系统的整体感所吸引，统一的UI，流畅的动画，明朗的字体，但是Windows嘛，虽然可能很少人注意，

但边缘真的糊糊的，也有像素感，甚至有些“残影”。虽然这和显示器面板特性、以及分辨率都有很大关系，毕竟按照苹果的Retina来，27英寸动不动就4K、5K了。

▌系统字体和渲染差异

但字体本身也有影响，从Win7的中易宋体，到Vista后的微软雅黑，设计上确实无衬线的雅黑更漂亮和谐，一套字体成本甚至高达200w美刀...

而ClearType功能，则是利用并排3个彩色子像素勾勒字体轮廓，如果字号偏小，两侧就会有彩色残影现象，

如同赛博朋克2077里开了“色差”特效，其实这是代替了传统的纯灰度抗锯齿，理论上有更好的精度，但实际肉眼观感并不好，白底黑字，放完望去，尽是花花绿绿...

在Win10 1703之后，微软重写了GDI与字体相关部分，X和Y轴都支持抗锯齿，横线不再粗细不均、重心偏移、大小不一，但锐化特征依然存在，因为ClearType的初衷是让字体清晰锐利，即使改变字形，字符形状也应和像素契合，以防止模糊，提高可读性，并非圆滑。而中文笔画多，其实不适合ClearType渲染。

反观隔壁苹果的目标是为了还原字体设计，哪怕模糊也要保持字形，保持观感一致。总的用下来，Windows下字体观感跟mac的Quartz、Linux安卓的FreeType引擎的那种亚像素平滑方案，还是有差距的。

关了ClearType之后，系统默认的部分字体观感自然了，但其他字体的渲染又会很迷，模糊、粗细不均，开不开都有各自的问题...

为了兼容性的传统Win32环境下，依然采用ClearType/GDI渲染。而WinRT环境下的Modern UI则采用了DirectWrite渲染，比方说各种UWP应用、浏览器。

（被DirectWrite接管后的ClearType抗锯齿效果其实很不错，甚至比Mac强）

▌什么是GASP和Hinting

GASP是什么东西呢？全称Grid-fitting and Scan conversionProcedure Table，直译过来就是栅格拟合与扫描转换程序表，名字长的离谱...它把矢量化的字体，光栅化处理，以适应不同分辨率、尺寸的屏幕。

主流显示器分辨率还是1080P，往上还有2K甚至4K，在高分辨率下，我们往往需要在设置中[更改文本、应用等项目大小]，才能得到正常的显示比例，（这里又得骂一句Win的高分屏适配蛋疼了）

微软雅黑最佳显示字号为14px、12px。按目前微软雅黑的GASP表中的定义，21px（字体边长21像素）是一个阈值，高于21px的大字，才会启动平滑渲染，这就导致低分屏的字体，为了锐利就会“大果粒”，像素锯齿感比较明显。

开150%才能得到比较好的观感，因为21px对应的是130%，但系统只有125%的缩放选项，刚好错开，导致渲染效果不佳。

那hinting是什么呢？它是字体内置的微调信息，也就是在分辨率不匹配的时候怎么做，Win默认hinting程度较高，且关了小字号AA（抗锯齿），这正是显得模糊或者锯齿感强的原因。

▌更换字体

所以网上有很多玩家暴力替换成改过GASP 表的字体，绕开hinting，直接按原字形（Glyph）渲染。（如：zhuanlan.zhihu.com/p/20194452、i.a632079.me/win10-remove-font-hinting）

但这类方案可能会有bug或者风险，而且系统更新后可能失效，需要根据自己系统版本选择对应的字体包，并非长久之计。

我们可以通过noMeiryoUI（github.com/Tatsu-syo/noMeiryoUI/releases），替换系统默认字体、字号，

如果你的使用环境，简繁中日英都会接触，可以尝试等宽的Inziu Iosevka系列字体，观感会比较一致。也可以换用insider版本放出的兰亭黑Pro（微软雅黑11.3.0）。

浏览器可以在设置里替换字体，比较推荐的是Sarasa Gothic更纱黑体（github.com/be5invis/Sarasa-Gothic/releases）。

最简单的字体都有很深的门道，虽然微不足道，依然值得称道，潜移默化地改善你的使用体验。更暴力、全局的方案，则是使用MacType，这在一些系统美化案例中非常常见，有优点，也有缺点，需要取舍，而且需要折腾，关于它的故事，我们下回再续~

参考&引用：

bilibili.com/read/cv7719200

zhuanlan.zhihu.com/p/56583542

zhuanlan.zhihu.com/p/96114832

www.joelonsoftware.com/items/2007/06/12.html

zhihu.com/question/19709748/answer/270219738

docs.microsoft.com/en-us/typography/opentype/spec/gasp

件项目实训及课程设计指导——如何应用CSS+Div分离Web表示层数据处理和展现逻辑

1、常规的Web页面实现方法

早期的Web应用系统开发中的Web页面内的信息定位和Web页面布局一般是采用HTML表格<table>标签实现的，但由于HTML标签本身是将数据和显示风格混合在一起的——请见下面的表格标签示例：

<table><tr><td>表格中的某个单元格需要显示的数据</td></tr></table>

当每个用户请求访问后台服务器时，服务器端程序都必须要将整个页面文件的全部显示格式控制的HTML标签内容向客户端的Web浏览器发出。如下示图为传统的页面设计中利用表格定位和布局页面内容的设计效果的示例图

这种利用<table>标签实现Web页面信息定位和布局的页面设计方法不便于Web页面的维护修改和功能扩展，基于MVC的系统架构模式的基本思想要求将页面中的数据和显示风格两者相互分离——也就是MVC体系架构设计模式中所倡导的表示和模型相互分离的设计原则。

2、J2EE Web 表示层组件JSP

JSP（Java Server Pages）是由Sun Microsystem公司（现在改为Oracle公司）于1999年6月推出的动态网站实现技术，并且是基于Java Servlet以及整个Java技术体系的Web开发技术。

而且JSP技术具有简便和高性能、服务器无关性和可重用性等技术实现方面的特点。但JSP技术在应用方面也暴露出一些不足之处：Web页面开发实现的人员职责不清晰、HTML标签与JSP脚本程序混合在一起而导致Web页面不便于维护升级和功能扩展，因为Web页面的内容（"数据"）和表现（"HTML标签"）耦合在一起。

如下示图为某个JSP页面示例，在该JSP页面中包含有服务器端的Java程序脚本代码、JSP标签和HTML标签，整个JSP页面内容显得比较"凌乱"，可读性比较低。

正是由于JSP技术本身存在有这些方面的问题，能否将面向对象Java编程技术中所倡导的"封装"、"隔离"等OOP设计思想应用于JSP Web页面的应用开发中？目前在J2EE应用开发平台中出现了许多完善、甚至代替JSP作为表示层的新技术。

3、采用"CSS+Div"分离J2EE Web表示层组件中的数据和表现

（1）"CSS+Div"中的CSS是页面层叠样式表技术

CSS（Cascading Style Sheet）是Web页面层叠样式表技术，利用CSS中的各种规则定义可以统一规范Web应用系统中的整体网页的格式，而不再需要分别给每个Web页面中的目标标签单独进行显示风格的属性设置。从而大大地减少了对Web页面显示风格的重复编辑、也提高了Web页面功能的可扩展性

（2）"CSS+Div"中的Div代表<div>标签

Div其实也就是HTML超文本标签语言中的<div>标签，<div>标签主要用于构建Web页面中区域的定义——简单地说，也就是它能够将Web页面划分为不同的功能区块。每个功能区块的显示风格和其中的数据本身是相互分离的。

（3）采用"CSS+Div"分离Web表示层页面中的数据处理逻辑和表现逻辑

由于CSS主要是实现Web页面中的数据显示风格，而利用<div>标签可以包装和定位其中的数据。因此，"CSS+Div"相互组合在一起就能够分离Web表示层页面文件中的数据处理逻辑和表现逻辑。

Web应用系统的表示层开发人员首先应用<div>标签构建好每个功能区块，之后再用CSS样式单给各个<div>标签统一配置相应的显示风格——<div>标签不仅能够定位页面中的文字内容，也能够包装图片（图片以背景的形式出现）或者其它形式的标签。

<div>标签代表要显示的Web页面数据的一个容器，而CSS层叠样式表技术则能够控制这个容器的各种显示元素——比如高度和宽度、边框的颜色、背景颜色以及其中的文字大小、文字颜色等等这些显示信息。

"CSS+Div"是目前比较流行的Web页面版面布局方式，能够分离Web表示层页面中的数据处理逻辑和表现逻辑、并且还能够减少Web页面中HTML标签的数量、减少网络数据的传送量；也更便于Web页面的维护修改和功能扩展；而且还可以为同一个Web页面或者一组Web页面统一定义一个CSS层叠样式表文件或者为不同的功能区块定义不同的CSS层叠样式表文件，并且可以动态切换和应用不同的CSS层叠样式表文件而产生出Web页面"换皮肤"的应用效果。

4、为什么要应用"CSS+Div"构建Web应用系统表示层组件

（1）减少Web页面中的重复HTML标签和提高Web页面的响应性能

由于采用CSS层叠样式表技术能够全局定义各个不同Web页面的显示风格，从而避免了在每个Web页面中都内嵌有这些显示风格的控制标签，这样的Web页面设计方法能够大大地减少Web页面中的重复标签的数量和提高Web页面的响应性能。

另外，CSS层叠样式表技术的兼容性也比较高——目前各个不同厂商的浏览器也都支持CSS层叠样式表技术。一个采用"CSS+Div"技术实现的Web页面布局可以在不同的Web浏览器、不同的网络设备上都能够正常地显示。因此，它也方便了基于"CSS+Div"构建的Web应用系统的可扩展性和可移植性——Web页面中需要显示的数据及其它形式的内容与显示设备无关。

（2）分离Web页面的表现逻辑与数据结构定义

在实际企业应用系统的Web页面开发中，一般再配合采用JavaScript脚本语言进行行为控制——也就是采用"CSS+Div+JavaScript"三种技术相互结合进行Web页面开发，其中的CSS层叠样式表技术实现Web页面风格的显示、Div（<div>标签）则实现其中数据的包装和定位、而JavaScript脚本程序代码则实现与用户相互交互的事件等行为的控制。

因此，采用"CSS+Div+JavaScript"三种技术相互配合进行Web页面开发，基本上能够达到模型视图控制器（MVC）体系架构设计模式所倡导的"结构"、"表现"、"行为"三者相互分离的效果。

如果应用该技术，首先，将能够使得Web页面中的各个部分的耦合性更小、更易于维护和扩展。比如，如果希望调整Web页面的显示风格，设计和开发实现人员只需要改变相关的CSS层叠样式表文件中有关的样式表定义，而Web页面文件本身并不需要被动地修改；其次，Web页面的结构清晰，设计和开发实现相关的人员分工也非常明确。

5、在银行账户信息管理系统页面开发中应用CSS+Div+JavaScript技术

在示例项目银行账户信息管理系统Web页面开发中，作者应用了"CSS+Div+JavaScript"三种技术，不仅减少了每个Web页面中的标签总量，也将Web页面中的格式、内容和行为三者相互分离。

另外，在银行账户信息管理系统中还应用了Tiles模板技术将整个Web页面分为不同的版块（Tiles），而每个版块中的Web页面文件又采用"CSS+Div+JavaScript"技术实现，最终使得整个Web应用系统中的每个Web页面内的HTML标签数量都比较少，而且可重用度也都比较高。

下面的代码示例中的Web页面内容为示例项目银行账户信息管理系统中版权信息页面内容的示例，其中的JavaScript脚本程序实现Web页面内容的防拷贝控制、而Web页面的显示风格定义由style.css样式表文件定义——请见黑体标识的部分代码——应用CSS+Div+JavaScript技术实现版权信息页面内容的示例

<%@ page contentType="text/html; charset=gb2312" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
          <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
          <link href='<c:url value="/css/style.css" />' type=text/css rel=stylesheet />
          <title>蓝梦网上银行系统版权信息显示页</title>
    </head>
    <body>
          <script type="text/javascript">
                document.body.oncopy=function (){
                setTimeout( function () {
                var text=clipboardData.getData("text");
                if (text) {
                text=text + "\r\n所复制的内容来源于"蓝梦网上银行系统"
                www.webbank.com ，原文的链接为："+location.href;
                clipboardData.setData("text", text);
                }}, 100 )
                }
          </script>
          <div id="globalMenuBar">
                <a href='<c:url value="/pageForwordAction.action?action=forwardIndex" />'
                class="hrefstyle">返回首页</a> -
                <a href="#" class="hrefstyle">关于本站</a> -
                <a href="#" class="hrefstyle">网站帮助</a> -
                <a href="#" class="hrefstyle">网站声明</a> -
                <a href="#" class="hrefstyle">服务网点</a> -
                <a href="#" class="hrefstyle">服务热线</a> -
                <a href="#" class="hrefstyle">广告合作</a> -
                <a href="#" class="hrefstyle">下载声明</a> -
                <a href="#" class="hrefstyle">友情连接</a> -
                <a href="#" class="hrefstyle">网站地图</a> -
                <a href="#" class="hrefstyle">联系我们</a>
          </div>
    </body>
</html>

为了减少本书的篇幅，在上面的代码示例中省略了各个超链接中的目标URL地址的显示。该页面在Macromedia Dreamweaver工具软件中的预览效果请见下图示例图所示。

6、应用支持"CSS+Div"的可视化软件工具提高页面开发的效率

（1）CSS Tab Designer是一款使用CSS设计导航菜单的可视化软件

由于在"CSS Tab Designer"可视化软件中内置有高达60多种不同风格的样式，Web页面开发人员只需修改现成样式的模版文件，就能快速地生成满足自己的Web应用系统需要的CSS菜单。如下示图为"CSS Tab Designer"官方网站对该软件的功能特性的介绍文字的局部截图，读者可以在此网站中下载该软件，为开源共享软件。

并且该软件生成的XHTML标签严格遵循W3C网页标准，所创建出的CSS菜单也能够兼容于各种主流的浏览器（如Internet Explorer、Firefox、Opera、Netscape等）。

读者在成功下载该开源软件后，在CSS Tab Designer的系统文件及目录结构中的tab.exe文件为它的启动程序。而在Help目录中的文件为操作帮助指南，samples目录内的文件为示例样式文件，styles目录内的文件为CSS Tab Designer内带的各个样式模板文件。

（2）启动CSS Tab Designe导航菜单可视化软件

读者点击所下载的CSS Tab Designe文件目录中的tab.exe文件就可以启动CSS Tab Designe导航菜单可视化软件，下图所示为启动后的初始界面的截图。其中在左面【项目】视图中显示所创建的各个页面文件；而在中间的【标签样式表】视图中提供有CSS Tab Designe可视化软件内带的各个模板样式，开发人员可以直接选择；在右面的【预览】视图中直接显示开发人员所设计的结果、并能够采用"所见即所得"方式进行开发实现。

（3）浏览CSS Tab Designe导航菜单可视化软件的操作帮助指南

在CSS Tab Designe导航菜单可视化软件提供有操作帮助指南，并且文档的技术说明内容写的也比较详细和易懂——请见下图所示的帮助文档的局部内容的截图。读者可以浏览和阅读CSS Tab Designe导航菜单可视化软件的帮助文档掌握对该软件的使用，以提高应用CSS+Div技术进行页面设计时的效率。

如何应用策略设计模式的思想设计通用的数据库连接类

如何应用策略设计模式分离JDBC数据库连接中的外部环境信息

如何应用GOF设计模式中的构建者模式创建复合对象实例

如何应用GOF设计模式中的创建型模式实现松耦合地创建对象实例

如何应用观察者设计模式重构系统中日志处理功能实现的程序代码