字体平滑

字体平滑检测

最新推荐文章于 2025-09-10 11:07:46 发布

转载最新推荐文章于 2025-09-10 11:07:46 发布 · 112 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zsk526/archive/2012/03/14/2395804.html

文章标签：

#前端 #ViewUI

看了点点，感觉她的前端做得很细腻，细节处理得很好，有时间要好好拜读一下她们的代码。

今天看她处理字体上：

支持平滑字体的浏览器上使用微软雅黑

不支持平滑字体的浏览器上使用宋体（中文非雅黑）可以看出，在html上添加了一个类：hasFontSmoothing-false

为什么要这样做呢，因为在不支持字体平滑的浏览器下真的很丑看下图

然后问题是，怎么知道浏览器是否支持字体平滑呢？你懂得，Google 一下。

第一个搜索结果 http://www.useragentman.com/blog/2009/11/29/how-to-detect-font-smoothing-using-javascript/

英文不好的，直接看代码，看不懂代码的，直接用：

var TypeHelpers = new function(){

   // I use me instead of this.  For reasons why, please read:
   // http://w3future.com/html/stories/callbacks.xml
   var me = this;

   me.hasSmoothing = function(){

      // IE has screen.fontSmoothingEnabled - sweet!
      if (typeof(screen.fontSmoothingEnabled) != "undefined") {
         return screen.fontSmoothingEnabled;
      } else {

         try {

            // Create a 35x35 Canvas block.
            var canvasNode = document.createElement('canvas');
            canvasNode.width = "35";
            canvasNode.height = "35"

            // We must put this node into the body, otherwise
            // Safari Windows does not report correctly.
            canvasNode.style.display = 'none';
            document.body.appendChild(canvasNode);
            var ctx = canvasNode.getContext('2d');

            // draw a black letter 'O', 32px Arial.
            ctx.textBaseline = "top";
            ctx.font = "32px Arial";
            ctx.fillStyle = "black";
            ctx.strokeStyle = "black";

            ctx.fillText("O", 0, 0);

            // start at (8,1) and search the canvas from left to right,
            // top to bottom to see if we can find a non-black pixel.  If
            // so we return true.
            for (var j = 8; j <= 32; j++) {
               for (var i = 1; i <= 32; i++) {

                  var imageData = ctx.getImageData(i, j, 1, 1).data;
                  var alpha = imageData[3];

                  if (alpha != 255 && alpha != 0) {
                     return true; // font-smoothing must be on.
                  }
               }

            }

            // didn't find any non-black pixels - return false.
            return false;
         }
         catch (ex) {
            // Something went wrong (for example, Opera cannot use the
            // canvas fillText() method.  Return null (unknown).
            return null;
         }
      }
   }

   me.insertClasses = function(){
      var result = me.hasSmoothing();
      var htmlNode = document.getElementsByTagName('html')[0];
      if (result == true) {
         htmlNode.className += " hasFontSmoothing-true";
      } else if (result == false) {
            htmlNode.className += " hasFontSmoothing-false";
      } else { // result == null
            htmlNode.className += " hasFontSmoothing-unknown";
      }
   }

}

// if EventHelpers.js is included, insert the hasFontSmoothing CSS classes
if (window.EventHelpers) {
   EventHelpers.addPageLoadEvent('TypeHelpers.insertClasses')
}

也许细节就体现在这里吧，亲，点点网上的实现就是用上面的方法噢。前端开发实现功能下要注重细节

转载于:https://www.cnblogs.com/zsk526/archive/2012/03/14/2395804.html