Windows XP、ClearType 和微软雅黑

Windows XP、ClearType 和微软雅黑字体的那点事

言
多年以来，中文网页设计师一直处于一种 “字体匮乏” 的窘境之中。
这是因为从中文 Windows 的第一个版本 3.2 开始，在相当长的一段时期内，系统自带的中文字体就仅仅局限于苍白单调的 “宋黑仿楷”。加上长期以来 Windows 在字体渲染技术方面的严重缺失，使得设计师在为中文网页选择正文字体时，基本上就只有中易宋体的点阵形态这唯一的选择。
直到 Vista 携微软雅黑字体横空出世，中文网页设计师才仿佛看到了世界的曙光。
微软雅黑脱胎于方正集团旗下的新锐字体 “兰亭黑” 家族，不仅字体的间架结构针对屏幕阅读场景进行改造，同时还针对液晶屏幕下小字号的显示效果进行逐字的笔划微调工作（hinting），以保证最终为用户呈现出清晰、平滑、易于阅读的显示效果。
因此，微软雅黑一经推出，便在中文网页设计界引发不小的震动。网页设计师和前端工程师们不禁打起它的主意——如何将微软雅黑字体广泛、安全地应用到网页设计中去？或者说，微软雅黑字体的普及率究竟如何？

微软雅黑在 XP 中的安装率

微软雅黑是 Vista 及更高版本 Windows 的标配字体，但不是 XP 的标配字体。XP 的任何一个 SP 或更新包都没有（将来也不太可能）包含它。

XP 系统上的微软雅黑字体，通常有两种来源：

用户主动下载安装。
安装 Office 2007 以上版本时自动获得。

由此可见，稍微“高端”一些的 XP 用户都有可能安装了微软雅黑字体，但具体比率不详。

对此，我的建议是：

考虑这个比率不如考虑目标受众群的划分和取舍。
在一定程度上考虑好无雅黑情况下的平稳退化。

微软雅黑与 ClearType

ClearType 是微软开发的次像素字体渲染技术，这项技术的本质是充分利用液晶显示屏单颗像素内的 RGB 三基色的次像素（sub-pixel，也称作 “亚像素” 或 “子像素”）、独立控制每颗次像素的明暗度，在次像素的级别进行字体的渲染和显示，从而令字体在水平方向上的渲染分辨率达到了原来的三倍。

微软雅黑字体只有在使用 ClearType 技术进行渲染时，才会达到最佳视觉效果。下面的图片展示了不同情况下微软雅黑字体的渲染效果：

已启用 ClearType 渲染方式
已启用传统的字体平滑渲染方式
未启用任何字体平滑技术

从 Vista 开始，Windows 系统默认开启 ClearType 特性。但 Windows XP 是否支持 ClearType 字体渲染模式呢？

ClearType 在 XP 中的启用率

Windows XP 原生支持 ClearType，但可能是出于对性能的考虑，默认是关闭状态。用户可以通过以下步骤在 XP 中启用 ClearType：

控制面板 → 显示 → 外观 → 效果 → 使用下列方式使屏幕字体的边缘平滑：清晰

XP 用户还可以通过安装微软提供的 ClearType 设置工具（ClearType Tuner PowerToy）来获得对 ClearType 效果的更多控制。

（图片来源：Microsoft.com）

那么，在 XP 中手动打开 ClearType 的用户比率有多少？这个数字恐怕不是很乐观。但是幸运的是，IE 7.0 及以上版本都是在自身视口内强制开启 ClearType 的（哪怕你用的不是液晶显示器）。

而 XP 下的非 IE 用户呢？或许你可以假设他们都比较 “高端”，已经给自己的 XP 手动开启 ClearType 了。

结语

在国内，Windows XP 操作系统目前仍然拥有不可忽视的用户数量。如果要在网页中使用微软雅黑作为主力字体，我们不得不考虑 XP 环境下所存在的一些不确定因素。

那么，我们有没有可能对 XP 用户的这些情况进行针对性的探测和统计，以便根据数据来做决策呢？

对于用户的 ClearType 设置情况，网页中的 JavaScript 脚本无法获取。而对于用户是否安装了微软雅黑字体，实际上是有探测方法的，有兴趣的朋友请继续关注后续文章。

希望本文能帮助到您！

点赞+转发，让更多的人也能看到这篇内容（收藏不点赞，都是耍流氓-_-）

关注｛我｝，享受文章首发体验！

每周重点攻克一个前端技术难点。更多精彩前端内容私信我回复“教程”

原文链接:https://github.com/cssmagic/blog/issues/15

辑：陈凌煜

本文出自微信公众号“August精彩编程”（ID：august-edu）

2019年8月12日

网站分静态网站和动态网站，相信小伙伴们对这两个词略有耳闻或者已经了解，那么小编还是啰嗦一下这两种网站有什么区别。

网页上的内容是随着数据库读取出来的内容不一样或者用户操作不一样而改变的，举个例子，比如网页上的用户登录，刚访问网页的时候用户登录状态是无登录状态，当用户点击登录，弹出输入账号密码的窗口的时候，这还不算是动态，还属于静态，那么接下来，用户点击登录按钮，网页将账号密码提交到服务器后台，服务器把账户密码拿去跟数据库里面存的做比较，如果一样，则登录成功，网页显示登录成功状态，如果核对没有完全一致，则登录失败，网页保持无登录状态。

像这种随着用户操作而改变内容的网站，才称之为动态网页。

看了上面的动态网站，其实对静态网站也能有一定理解了，不理解也没关系，这里再详细说明下！静态网站是指网站无论用户操作什么，都是一模一样的，不会有任何改变，那么有小伙伴可能又要问了，有些网站上有导航栏，我点击首页，会跳转到首页，点击关于我们，又换了一个页面，这难道不是动态吗？不是的，这是静态，你无论怎么操作，你会发现你跳转来跳转去的网页长得一摸一样，没有任何改变。

其实除了看网页变化来判断是静态网页还是动态网页之外，还有个方法，看网页地址栏的扩展名，如果.html就是静态网页，如果是.asp或者.php那就是动态网页。但是这种说法并不完全正确，现在可以动静分离，可以理解为有没有数据库支持！

如图所示是我在网络上找到的一个asp动态网站。Html网站网上非常多一抓一大把，php也不少，有兴趣的小伙伴可以自己上网搜索下！

接下来进入主题，我们先来看看我们今天要实现的效果是什么？

鼠标经过有效果对吧。

我们先看看效果图：

这是一个网站的导航栏

接下来我们把鼠标放上去看看会发生什么？

这种神奇的效果要如何设计呢？大家都知道网页设计的三大利器是什么？

答案：HTML+CSS+JavaScript

今天这个案例我们只需要用到HTML+CSS，还是很简单的，我们先来看看导航栏怎么写：

<!DOCTYPE html>
<html>
<head>
 <title>August精彩编程</title>
</head>
<body>
 <div class="header">
 <a href="#"><img src="logo.png"></a>
 <div class="header-word">
 <ul>
 <a href="#"><li>CONTACT</li></a>
 <a href="#"><li>EVENTS</li></a>
 <a href="#"><li>FACULTY</li></a>
 <a href="#"><li>GALLERY</li></a>
 <a href="#"><li>ABOUT</li></a>
 <a href="#"><li>HOME</li></a>
 </ul>
 </div>
 </div>
 <div class="clear"></div>
</body>
</html>

这样写我们的导航栏就写出来了，但是效果是什么样的呢？

我们需要对这个页面加上CSS（层叠样式表）。代码如下：

<!DOCTYPE html>
<html>
<head>
 <title>August精彩编程</title>
 <style type="text/css">
 *{
 padding: 0;
 margin: 0;
 }
 body{
 width: 100%;
 }
 html{
 height: 2400px;
 }
 .header{
 width: 100%;
 height: 100px;
 background:#07cbc9;
 }
 .header img{
 height: 48px;
 width: 260px;
 padding: 26px 26px;
 padding-left: 10%;
 float: left;
 }
 a{
 color: #fff;
 text-decoration: none;
 }
 .header .header-word{
 padding-right:75px; 
 }
 .header .header-word ul li{
 float: right;
 font-size: 16px;
 font-family: "微软雅黑";
 padding-right: 10px;
 padding-left: 10px;
 list-style: none;
 line-height: 100px;
 color: #fff;
 }
</style>
</head>
<body>
 <div class="header">
 <a href="#"><img src="logo.png"></a>
 <div class="header-word">
 <ul>
 <a href="#"><li>CONTACT</li></a>
 <a href="#"><li>EVENTS</li></a>
 <a href="#"><li>FACULTY</li></a>
 <a href="#"><li>GALLERY</li></a>
 <a href="#"><li>ABOUT</li></a>
 <a href="#"><li>HOME</li></a>
 </ul>
 </div>
 </div>
 <div class="clear"></div>
</body>
</html>

然后效果就出来啦，如图所示：

接下来就是今天我们所学内容最核心的内容，涉及到4个CSS的链接伪类。

链接伪类，是指链接的四个状态：激活状态（active）、已访问状态（visited）、未访问状态（link）、鼠标经过状态（hover）。

那么我们今天要使用的就是鼠标经过状态（hover），怎么使用呢？看已下这段CSS：

.header .header-word ul li:hover{
 float: right;
 font-size: 16px;
 font-family: "Microsoft YaHei UI";
 padding-right: 10px;
 padding-left: 10px;
 list-style: none;
 line-height: 100px;
 background: #000;
 color: #fff;
}

是哒，这样就完成了我们今天要制作的效果。

接下来附上完整代码：

作者：极客小俊」
「把逻辑思维转变为代码的技术博主」

咱们废话不多说直接上代码案例素材!

准备工作

首先准备图片素材放入到你的demo案例下的img文件夹

当然图片你也可以用其他类似的图来代替也是可以的!

如图

HTML代码结构

 <div id="big">
            <div class="box">
                <div class="pic"><img src="img/bag.jpg" alt="" title=""/></div>
                <div class="mask">
                    <h2>三用小巧思波士顿包</h2>
                    <p>印花波士顿包 复古波士顿包，手提单肩斜挎多用，印花PVC</p>
                </div>
                <div class="title">
                    <h2 class="sl"><span></span>全场2折起 印花波士顿包 专柜终身保养</h2>
                    <h3 class="sl"><i></i><span>抢全场2件88折</span>新款蜜蜂系列印花手提斜挎包</h3>
                    <div class="price">
                        <div class="zx_pr"><span>￥</span>659</div>
                        <div class="xl_yp">
                            <p><del>￥1998.00</del><span>退货赔运费</span></p>
                            <p><strong>70</strong>件已付款</p>
                        </div>
                        <div class="buy">抢!</div>
                    </div>
                </div>
            </div>
            <div class="box">
                 <div class="pic"><img src="img/bag3.jpg" alt="" title=""/></div>
                 <div class="mask">
                    <h2>猪年纪念款经典牛皮水桶包</h2>
                    <p>猪年纪念款 经典牛皮水桶包，自带强大气场</p>
                 </div>
                 <div class="title">
                    <h2 class="sl"><span></span>全场2折起 印花波士顿包 专柜终身保养</h2>
                    <h3 class="sl"><i></i><span>抢全场2件88折</span>新款蜜蜂系列印花手提斜挎包</h3>
                    <div class="price">
                        <div class="zx_pr"><span>￥</span>659</div>
                        <div class="xl_yp">
                            <p><del>￥1998.00</del><span>退货赔运费</span></p>
                            <p><strong>70</strong>件已付款</p>
                        </div>
                       <div class="buy">抢!</div>
                    </div>
                </div>
            </div>
            <div class="box">
                <div class="pic"><img src="img/bag4.jpg" alt="" title=""/></div>
                <div class="mask">
                    <h2>一包四用蜜蜂系列迷你小方包</h2>
                    <p>四用方盒包 一包四用蜜蜂系列迷你链条小方包</p>
                </div>
                <div class="title">
                    <h2 class="sl"><span></span>全场2折起 印花波士顿包 专柜终身保养</h2>
                    <h3 class="sl"><i></i><span>抢全场2件88折</span>新款蜜蜂系列印花手提斜挎包</h3>
                    <div class="price">
                        <div class="zx_pr"><span>￥</span>659</div>
                        <div class="xl_yp">
                            <p><del>￥1998.00</del><span>退货赔运费</span></p>
                            <p><strong>70</strong>件已付款</p>
                            </div>
                        <div class="buy">抢!</div>
                    </div>
                </div>
            </div> 
        </div>

CSS代码结构

*{
            padding:0px;
            margin:0px;
        }
        body{
            font-family: '微软雅黑';
        }
        .sl{
            white-space: nowrap;
            word-break: keep-all;
            text-overflow: ellipsis;
        }
        #big{
            width:950px;
            height:416px;
            margin:10px auto;
            overflow: hidden;
        }
        #big>.box{
            width:298px;
            height:410px;
            float: left;
            position: relative;
            overflow: hidden;
            border:1px solid #ccc;
            margin-left:19px;
        }
        #big>.box:first-child{
            margin-left:0px;
        }
        #big>.box>.pic{
            width:298px;
            height:300px;
            overflow: hidden;
        }
        #big>.box>.pic>img{
            transition: all 500ms;
        }
        #big>.box:hover>.pic>img{
            transform: scale(1.5);
        }
        #big>.box>.mask{
            height:300px;
            width:298px;
            position: absolute;
            left:-298px;
            top:0px;
            background:rgba(0,0,0,0.3);
            transition: all 600ms;
            color:#fff;
        }
        #big>.box>.mask>h2{
            font-size: 18px;
            margin:80px 0px 10px 10px;
        }
        #big>.box>.mask>p{
            font-size: 12px;
            margin:0px 0px 10px 10px;
        }
        #big>.box:hover>.mask{
            left:0px;
        }
        #big>.box>.title>h2{
            margin:10px auto;
            width:288px;
            height:20px;
            line-height: 20px;
            font-size: 14px;
            color:#333;
            overflow: hidden;
            font-weight: normal;
        }
        #big>.box>.title>h2>span{
            display: inline-block;
            width:31px;
            height:16px;
            vertical-align: middle;
            background: url('img/tu.png') no-repeat;
            background-size:cover;
            margin-right:5px;
        }
        #big>.box>.title>h3{
            width:288px;
            height:20px;
            margin:0px auto;
            font-size: 12px;
            color:#666;
            font-weight: 400;
        }
        #big>.box>.title>h3>i{
            width:12px;
            height:16px;
            display: inline-block;
            background:url('img/tu1.jpg') no-repeat;
            vertical-align: middle;
        }
        #big>.box>.title>h3>span{
            color:#f00;
            margin:0 5px 0 5px;
        }
        #big>.box>.title>.price{
            width:298px;
            height:50px;
            background:#e61414;
        }
        #big>.box>.title>.price>.zx_pr>span{
            font-size: 20px;
        }
        #big>.box>.title>.price>.zx_pr{
            width:83px;
            height:50px;
            line-height: 50px;
            float: left;
            margin-left:2px;
            vertical-align: bottom;
            font-size:38px;
            color:#fff;
        }
        #big>.box>.title>.price>.buy{
            width:56px;
            height:50px;
            line-height: 50px;
            text-align: center;
            background:url('img/tu3.png') no-repeat;
            float:right;
            color:#f00;
        }
        #big>.box>.title>.price>.xl_yp{
            width:145px;
            height:41px;
            float: left;
            margin:4px 0 0 8px;
            font-size: 12px;
            color:#fff;
        }
        #big>.box>.title>.price>.xl_yp>p>span{
            margin-left:4px;
            width:72px;
            height:17px;
            display: inline-block;
            line-height: 17px;
            text-align: center;
            border-radius: 10px;
            background:#ffb369;
        }
        #big>.box>.title>.price>.xl_yp>p:nth-child(2){
            width:80px;
            height:20px;
            line-height: 20px;
            text-align: center;
            border-radius: 1px;
            margin-top:5px;
            background:rgba(0,0,0,0.2);
        }
        #big>.box>.title>.price>.xl_yp>p:nth-child(2)>strong{
            margin-right: 5px;
            font-size: 14px;
        }

最终效果

如图

"点赞" "??评论" "收藏"

大家的支持就是我坚持创作下去的动力!?

?如果以上内容有任何错误或者不准确的地方，欢迎在下面留个言指出、或者你有更好的想法，欢迎一起交流学习???????????

在线咨询

上一篇：如何将大数据呈现为可视化图？
下一篇：Android中的Handler, MessageQ

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商