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小時內與您取得聯系。

整合營銷服務商