在前一篇文章的评论中夜未央提出:
对比了下,感觉你默认字体颜色太浅了,看长文可能比较容易注意力不集中,点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;
}
效果目测还行。 😉
网友小宋 中国
大哥字体一般都放哪啊!
十一个月前 Microsoft Edge 120 · Android 10S̆̈ 江苏 *
@网友小宋 别人放在公共CDN上的,需要自己搜一下。
十一个月前 Google Chrome 117 · GNU/Linux天一生水 美国
我对文末最后的那个icon感兴趣,看了下地址 https://s.w.org/images/core/emoji/14.0.0/svg/1f609.svg
十一个月前 Google Chrome 109 · Windows 10值得我折腾下了。
S̆̈ 江苏 *
@天一生水 哈哈这个不用折腾,WP自带的,直接输入文字符号比如“;-)”就转译了。
十一个月前 Microsoft Edge 120 · Mac OS X 10.15