换个字体真是麻烦多。 文字换行（iPhone 6） 搞笑的是，电脑浏览器“响应式设计模式”中竟然无法复现，只有老款手机上才发生。 解决办法： /* 父容器 */ .site-header .header-inner { display: inline-flex; } /* 子容器...

阅读更多

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

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

效果目测还行。 😉

这几个月一直不定期的折腾站点字体，原因大家都懂的，男人朝三暮四、喜新厌旧…… 因为没想过可以借助JS来切换，之前是通过直接改CSS或者干脆做子主题的方式实现切换。 然后今天有位自己送上门的网友Jdeal，回访时发现他博客使用...

阅读更多

威言威语发布了一款小巧隽永的插件Touching Comments，安装后还是比较美观实用的。 插件介绍 每一条评论，都是一个故事！ 大家在不同的时间，不同的故事中，发出一条评论。或许就是这么一些不经意的话语给当下你一丝温暖和...

阅读更多

偶然搜到官方库插件Show Parent Comment，用途是后台显示父级评论，这样省得评论太多搞不清回的是哪条。插件已长时间未更新，仍旧显示为0.2.1版，但本身代码也很少，有强迫症的筒子可以自己植入主题内。 Show Parent Comment

阅读更多

主题样式作了修订，增加了主页显示“状态（status）文章”功能。样式经过细调稍许入眼，但border在相邻区块就只能显示一条或者不显示。经过思考，增加了不怎么用的相邻兄弟组合器“+”，这样就能判断不同类型区块并在相应节点加入border...

阅读更多

近日发现他人博客评论列表里.png格式的头像显示清晰，而本博却是糊的。刷了半天头像源没效果，最后发现是早先自定义的评论列表中没加srcset。解决方法：

<img height=48 width=48 alt="<?php echo $comment->comment_author; ?>的头像" aria-label="<?php echo $comment->comment_author; ?>的头像" src="<?php echo get_avatar_url($comment, array('size' => 48)); ?>" srcset="<?php echo get_avatar_url($comment, array('size' => 96)); ?> 2x" class="avatar" />

主题一直有个功能没有实现，即鼠标移到图库内单独的图片上只显示该单图exif信息，而非所有图片的exif信息都显示出来。这个需求不止我自己有，早在2021年12月就有网友提出过。 需求 今天灵光一现，实现了。方法不难，两句CSS就...

阅读更多

喜欢在中英文间插入空格的博主都知道，WP有一款插件叫“空格爱好者”（Space Lover），由软件作者Tunghsiao Liu编写。整体代码简洁明了，以preg_replace与正则表达式来判断和添加中英文间的空格，达到悦目的效果。 当然插件也不是完...

阅读更多

古腾堡编辑器（Gutenberg Editor）发展了五年，如今早已是WordPress默认的编辑器。

在2020年文《更改古腾堡编辑器默认字体》中，提到如何更改编辑器的默认字体以实现实时预览文章效果。如今有相对更优雅的方法来实现。

1、在根目录建css文件夹，添加editor.css文件

/* Start font set for Gutenberg */
@import url('../css/wenkai.css');

.editor-post-title__block .editor-post-title__input, .block-editor-block-list__layout, .editor-rich-text.block-editor-rich-text, .wp-block-paragraph, .editor-styles-wrapper {
	font-family: "LXGW WenKai Screen", sans-serif !important;
}

.editor-post-title__block .editor-post-title__input {
/*	font-size: 42px;
	font-weight: 400;
	line-height: 50px;
	text-align: center;
*/
}

.edit-post-visual-editor, .edit-post-visual-editor p,
.editor-rich-text__tinymce.mce-content-body {
/*	font-size: 20px;
	line-height: 30px;
*/
}
/* End of font set for Gutenberg */

2、在function.php中添加

// Gutenberg default font
function guten_block_editor_assets() {
wp_enqueue_style(
'guten-editor-style',
get_stylesheet_directory_uri() . "/css/editor-style.css",
array(),
'1.0'
);
}
add_action('enqueue_block_editor_assets', 'guten_block_editor_assets');