引言:博客最重要的就是文字,所以开始优化!
优化目标:或清晰,或犀利,或浑厚的文字样式,有亲和力的文字字体,舒适的文字尺寸。
优化思路:对主题模板的CSS样式表,如:style.css 进行优化,添加必要的样式代码,达到上述目的!
具体步骤:(以中文字体为主)
1、文字尺寸的选择:
通常网站的文字在12px-14px这个范围,太大或太小必然不HEXIE!因此要合理选择,比如hzlzh选择了13px
预览:(注:Chrome仅支持 >= 12px 的尺寸!)
2、文字字体的选择:
不多说,也暂不讨论WOFF开放字体格式,献上hzlzh 的 设置;
font-family:'Microsoft YaHei', Arial, helvetica, Tahoma, sans-serif;
说明:这个css属性浏览器是左优先匹配的!'Microsoft YaHei' 即 微软雅黑 是针对 Chrome这类浏览器的,否则默认的字体有多难看应该知道哦,
其次就是后面几个 Arial,不多讲了,保证各种设备上的显示兼容性的字体。
3、文字阴影样式设置:
text-shadow 这个CSS属性,可以实现对字体的进一步美化,效果有 浑厚,犀利,外凸,内嵌,发光,模糊,等等~
使用的时候不要太过火,一切以阅读友好度为佳!
预览:请使用 IE 以外的浏览器方可。
4、文章行间距设置:
略。。。这个真的是因网站而异,我用的是 line-height:1.6em; 只要觉得适中即可!
5、选中文章颜色设置:
预览效果: 按住 Ctrl + A 即可!
加入以下代码:(注,IE无效)
selection{background-color:#63C;color:#FFF;}
a::selection{background-color:#0C0;color:#FFF;}
::-moz-selection{background:#63C;color:#FFF;}
a::-moz-selection{background-color:#0C0;color:#FFF;}
总结:根据不同站的配色情况,酌情调整,一定能得到最佳效果!
经过上面几步的优化,你的网站或许会给人耳目一新的感觉——-舒适,友善,便于阅读!
阴影效果最好不要设置全局,比如下面:LOGO,description,文章和侧边栏 和 页脚使用不同效果!
body{font:13px/18px Microsoft YaHei,Arial,Helvetica,sans-serif;}
.post_content,{text-shadow:0 0 1px #CCCCCC;}
#logo,#description,#footer {text-shadow:1px 1px 1px #FFFFFF;}
PS:本文无视 IE 及其全家!
- Pingback on 2011/02/27/ 23:07
@Surpet: 这沙发。
正在修改主题,我也拿去用用
我倒是不太喜欢阴影字体,看得眼睛很累。。你之前那个主题就用的文字阴影太过火。。现在这个还好。。但是还是影响了字体线条间的清晰,有点模糊。。
@QiQiBoY: 之前的那个的确过火了,特别是对chrome 用户,很模糊的感觉,要改要改
传说中,中文字号用偶数比较好
@Ray Chow: 其实网站建议的字体是 12px 或 14px ,而我偏爱13px 而已。
觉得大小刚好
无视的好~
PS:输入框里的字体也设置一个呗
@林木木: 输入框还没折腾,继承body,话说你那里只有在chrome下才有特殊化~
夜半飘过….我也在改主题~~借鉴~~~
@MOPVHS: 发现夜猫子改主题的很多嘛~
@HzlzH: 其实我是下午睡过头了,毫无困意~
@MOPVHS: 羡慕,下午还能睡觉。。。。
我在wordpress中基本也是这样设置的
font:13px/18px是啥意思,看到很多都这么写,但是我没用到过
@万戈: /左边是font-size
右边是line-height,也就是行高
我是标题才启用阴影,我目前用的也是13px的字体
@流年: 就是啊,13px 真的很和-谐
哈,的确是,我喜欢这样用 0 1px 0
@zwwooooo: 去看了,蛮不错的,稍稍浑厚了一点的感觉
闲逛,到处看别人网页HTML代码,发现你博客的标题标签很多都用错了,比如什么地方用H1,什么地方用H2等等。希望你去查查,合理的运用标题标签,对搜索有好处,反之会被搜索认为是作弊。
@西门: 已经调整好了,这个意见很及时啊,新主题难免需要不断加强 谢谢~
@HzlzH: 我说下午西门问我要不要告诉某个博主他的错误,我还跟他说那肯定要说了呗,原来就是自力博主你啊
,WP果然是一个圈
@N: 是啊,博客圈就是互相帮助,都才能发展起来
我的设置也是差不多 多谢啦··
学习一下
书香阁留个小脚丫,以后常来往哈
wordpress样式兼容性比较好
一样是13号雅黑啊……阴影以前想用,但是对眼睛不好,只选了链接和标题有效果。
@静夜燃香: 不要用的太过火,阴影还是很舒服的
特地使用IE5.5浏览自力博客的飘过,并表示压力不大。
@joomla: 你这不是FF3.6.8么,鸭梨不大吧
@HzlzH: 我擦,杯具了,被看出来了
emlog的飘过
@学夫子: 是不是考虑换wordpress了?毕竟 Emlog没有WP受众多
本文无视 IE 及其全家…
不错~学习了~
我也用着13px。。虽然有人说偶数的比较好。
但我就觉得这个大小合适
@A.shun: 同道中人,觉得13px相当舒适~
@HzlzH: 哈哈,13,我喜欢,字体13也不错
从来只管firefox下效果的路过
@Mini Dragon: 那可不行,用IE的人还是占大多数滴
不用啊!用着舒服就OK了,呵呵
这主题真不错,很漂亮,关键是看了舒服
@Rusaer: 流沙,话说一直在rss上看你的文字,懒得到处跑了
@HzlzH: 呵呵,谢谢。荣幸,不过我最近懒了
哎,这主题越来越漂亮了,怨念啊!!!!!!!
@小邪: 话说我很喜欢你那套校内的表情,考虑了很久了
@HzlzH: 嘿嘿,那套表情特猥琐,刚好能让我表达出自己淫荡的思想感情 ~
@小邪: 没见过这么夸自己的,显然淫荡变成了褒义词
文字还是不要太小,我觉得14px还可以,太小了让我们这些近视眼怎么活啊
嗯,学习了。正在打算把字体搞大呢。
无视IE的,好多代码
5、选中文章颜色设置:
这个怎么通过w3c捏
@snowxh: 貌似这个选种颜色不能过w3c
@HzlzH: 已经通过鸟 全扔js里了!
@snowxh: 你狠~~~
写的很细啊~学习了·
我发现最近很多东西都是和你学的
研究了一阵 终于学会把正文变成14px