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

   

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

对比了下,感觉你默认字体颜色太浅了,看长文可能比较容易注意力不集中,点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 条评论

  1. 网友小宋

    中国

    大哥字体一般都放哪啊!

    三个月前 Microsoft Edge 120 · Android 10

    回复

    • S

      江苏

      @网友小宋 别人放在公共CDN上的,需要自己搜一下。

      三个月前 Google Chrome 117 · GNU/Linux

      回复

    • S

      江苏

      @天一生水 哈哈这个不用折腾,WP自带的,直接输入文字符号比如“;-)”就转译了。

      三个月前 Microsoft Edge 120 · Mac OS X 10.15

      回复

       

发表评论

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