code人生 · 2014 年 12 月 18 日 1

雅黑字体下WordPress 行高与字符间距最佳实践:1.8em与0.06em

最近看一下网站的流量统计,发现有几个关键词是一直有很多流量进来的,一个是Win8操作系统的BCD启动项修复解决方案,一个是WordPress程序修改行间距、段落间距的办法。看来WordPress新入门的玩家仍然有不少,毕竟是世界上使用人数最多的博客程序,一些比较基础的调整方法自然就是刚需了。

对于WordPress调整行间距和段落间距的方法,我在这里再说一次,利用Firefox火狐浏览器或者Chrome谷歌浏览器很容易调整和测试这些视觉效果。方法就是在你需要调整的地方点击鼠标右键——查看元素,找到当前内容所在标签和上一级标签。

以我的网站为例,在正文的一段文字当中点击鼠标右键——查看元素,就可以发现当前标签是<p>段落标签,而上一级标签是<div class="entry-content">。我们需要的正是这个<entry-content>,这是CSS的选择器,微调视觉效果就需要用到。

因为Windows平台下好的字体实在是太少了,现在感觉Linux下的文泉驿都要比微软雅黑强很多,因为雅黑字体总给人一种被压扁的感觉,实际上也确实是被压扁了。这样的形状让雅黑字体在字符间距(letter-spacing)比较小的情况下很难看,挤作一团,而宋体则稍好一点,字符间距为0的状态下也稍稍能看。

OK,下面就是一些具体方法,//后的是注释,添加的时候可以去掉。以我的网站为例:

.entry-content {    //标签中是class=""的就使用点,如.entry;是id=""的就用#,比如#entry
    font-family: "Microsoft YaHei", Helvetica, Serif, Verdana;    //选择字体
    font-size: 16px;    //设置字体大小
    line-height: 1.8em;    //设定行高,这里是1.8倍字体大小
    letter-spacing: 0.06em;    //设定字符间距(字母之间、汉字之间距离),这里是字体大小的0.06倍
}

.entry-content p {
    margin:20px 0 0 0;    //段落间距,p就是段落标签,margin后分别是上、右、下、左的间距,我只设上间距
}

差不多就是这意思了,稍微有点HTML和CSS基础的人都知道是什么意思了。要是还看不懂,可以留言来交流,我每天清查一次评论。比较着急的也可以到微博上与我交流,我的微博: @科技小玩意儿,欢迎WordPress博主们。

1
0
希望看到您的想法,请您发表评论x