新致宋字体反锯齿方法二则

目录

在前一篇文章的评论中夜未央提出

对比了下,感觉你默认字体颜色太浅了,看长文可能比较容易注意力不集中,点T后的备用字体则深很多。对于两种字体本身而言,我感觉差异不大,都比较舒服。

实际上这个锅是字体本身不带500字重造成的。动手解决,分为两种情况——MacOS与Windows,Linux的弟兄暂时抱歉因为我觉得Linux显示得挺好。

MacOS

很简单,将-webkit-font-smoothing: antialiased;改为-webkit-font-smoothing: auto;立即解决。

Windows

相对复杂。首先引入一段js代码以判断操作系统:

//判断系统类型
function myOS(){
    var agent = navigator.userAgent.toLowerCase();
    var isMac = /macintosh|mac os x/i.test(navigator.userAgent);
    if (agent.indexOf("win32") >= 0 || agent.indexOf("wow32") >= 0) {
        //windows32
        document.body.classList.add("WinFont");
    }
    if (agent.indexOf("win64") >= 0 || agent.indexOf("wow64") >= 0) {
        //windows64
        document.body.classList.add("WinFont");
    }
    if(isMac){
        //mac
        document.body.classList.remove("WinFont");
    }
}
//加载时引入
window.onload = function () {
    myOS();
}

随后在CSS中为新致宋字体添加阴影:

/* Windows下字体 */
body.WinFont, .WinFont .description, .WinFont .graph, .WinFont pre, .WinFont .grap {
    text-shadow: 0.005em 0.005em 0 #000;
}

效果目测还行。 😉

共有 4 条评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注