微软雅黑在 WordPress 前端显示字符间距实践

/ 0评 / 0

现在大部分的 WordPress 博客都在使用 微软雅黑 这个字体来作为显示文章的主要字体,毕竟 Windows 平台下好的字体实在是太少了。但是 微软雅黑 这款字体也有不好的地方,因为它看起来像是被压扁了一点,实际上也确实如此。

也正是因为被压扁了点,在默认字符间距(letter-spacing)下,排版文字被挤在了一起,对阅读造成了不好的影响,所以为了能够在 Lingonberry 主题下达到理想的阅读体验,我尝试调整了 Lingonberry 主题里的字符间距(letter-spacing)。

微软雅黑最佳字符间距(letter-spacing):0.06 em

下面就记录一下具体步骤。


因为之前建立过 Lingonberry 主题的子主题,详细步骤查看《给 Lingonberry 主题建立子主题》,所以这次的修改依旧在 Lingonberry 主题的子主题的 style.css 内,添加

letter-spacing: 0.06em;

便可以了。


下面的代码便是以我的站点为例:

h1, h2, h3, h4, h5, h6, p, body, blockquote, address, big, cite, code, em, font, img, small, strike, sub, sup, li, ol, ul, fieldset, form, label, legend, button, table, caption, tr, th, td {
    font-family: "Lucida Grande","Helvetica Neue",Helvetica,Arial,Verdana,"PingFang SC","Hiragino Sans GB",STHeiti,"Microsoft YaHei","WenQuanYi Zen Hei","WenQuanYi Micro Hei","Noto Sans CJK SC","Source Han Sans CN",SimSun,sans-serif;    //选择字体
    letter-spacing: 0.06em;    //设定字符间距(字母之间、汉字之间距离),这里是字体大小的 0.06 倍
    font-size: 1em;    //设置字体大小
}

保存文件,上传覆盖(记得备份原文件),刷新看看。

很简单,对不对?


上面修改的是整个 Lingonberry 主题的字符间距(letter-spacing),如果你仅仅只是想修改一下文章内容显示的字符间距(letter-spacing),那么在子主题的 style.css 内添加下面的这段 CSS 就可以了。

.post-content {letter-spacing: 0.06em;}

如果是其他的 WordPress 主题,可以用 Chrome 浏览器或者 Firefox 浏览器选择你想调整一段文字,点击鼠标右键——检查(Chrome)或查看元素(Firefox),就可以发现当前标签是 <p> 段落标签,而上一级标签是 <div class="********"> ,这是 CSS 的选择器,也是你想要调整部分的 CSS 样式,在主题样式 CSS 文件中找到 class 双引号里的样式位置在大括号内复制粘贴上面的代码,就能实现字符间距(letter-spacing)的调整了。

评论已关闭。