/ 代码 / 52浏览

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

文章目录

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

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

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

      Google Chrome 117 · GNU/Linux
  2. 天一生水

    我对文末最后的那个icon感兴趣,看了下地址 https://s.w.org/images/core/emoji/14.0.0/svg/1f609.svg
    值得我折腾下了。

    Google Chrome 109 · Windows 10
    1. S

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

      Microsoft Edge 120 · Mac OS X 10.15

回复 S 取消回复

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