优化wordpress文字显示CSS样式

引言:博客最重要的就是文字,所以开始优化!

优化目标:或清晰,或犀利,或浑厚的文字样式,有亲和力的文字字体,舒适的文字尺寸

优化思路:对主题模板的CSS样式表,如:style.css 进行优化,添加必要的样式代码,达到上述目的!

具体步骤:(以中文字体为主)

1、文字尺寸的选择:

通常网站的文字在12px-14px这个范围,太大或太小必然不HEXIE!因此要合理选择,比如hzlzh选择了13px

预览:(注:Chrome仅支持 >= 12px 的尺寸!)

这货 font-size:12px
这货 font-size:13px
这货 font-size:14px

2、文字字体的选择:

不多说,也暂不讨论WOFF开放字体格式,献上hzlzh 的 设置;

font-family:'Microsoft YaHei', Arial, helvetica, Tahoma, sans-serif;

说明:这个css属性浏览器是左优先匹配的!'Microsoft YaHei' 即 微软雅黑 是针对 Chrome这类浏览器的,否则默认的字体有多难看应该知道哦,
      其次就是后面几个 Arial,不多讲了,保证各种设备上的显示兼容性的字体。

3、文字阴影样式设置:

text-shadow 这个CSS属性,可以实现对字体的进一步美化,效果有 浑厚,犀利,外凸,内嵌,发光,模糊,等等~
      使用的时候不要太过火,一切以阅读友好度为佳!

预览:请使用 IE 以外的浏览器方可。

发光属性 text-shadow:0px 0px 1px #6374AB;
内嵌清晰 text-shadow:0px 0px 1px #DDDDDD;
红色投影效果 text-shadow:1px 1px 1px #A52A2A;
浅蓝位移 text-shadow:5px 11px 1px #0075C0;
深蓝模糊 text-shadow: 3px 5px 4px #0000CD;
 
说明:text-shadow属性有4个参数,依次是阴影 水平位移,垂直位移,模糊程度,颜色。
      hzlzh 使用的是:  text-shadow:1px 1px 1px #FFFFFF; 也就是文字周围有白色的轮廓,显的更为明显,清晰。
      当然也可以使用  text-shadow:1px 1px 1px #AAAAAA; 这样文字就有另一种浑厚的清晰感觉了。

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 及其全家!

版权所有© HzlzH | 本文采用 BY-NC-SA 进行授权
转载需注明 转自: 《优化wordpress文字显示CSS样式

相关文章

{ Leave a Reply ? }

  1. Surpet China Opera Windows

    :?: 沙发。打蚊子时候发现的沙发。

  2. winy China Google Chrome Windows

    正在修改主题,我也拿去用用 :wink:

  3. QiQiBoY China Mozilla Firefox Windows

    我倒是不太喜欢阴影字体,看得眼睛很累。。你之前那个主题就用的文字阴影太过火。。现在这个还好。。但是还是影响了字体线条间的清晰,有点模糊。。

  4. Ray Chow China Google Chrome Windows

    传说中,中文字号用偶数比较好

  5. 林木木 China Google Chrome Windows

    无视的好~
    PS:输入框里的字体也设置一个呗

  6. MOPVHS China Google Chrome Windows

    夜半飘过….我也在改主题~~借鉴~~~

      • MOPVHS China Google Chrome Windows

        @HzlzH: 其实我是下午睡过头了,毫无困意~ :-|

  7. hooler China SouGou Browser Windows

    我在wordpress中基本也是这样设置的

  8. 万戈 China Mozilla Firefox Windows

    font:13px/18px是啥意思,看到很多都这么写,但是我没用到过

  9. 流年 China Mozilla Firefox Windows

    我是标题才启用阴影,我目前用的也是13px的字体

  10. mice China Internet Explorer Windows

    :wink: 我表示我正在用ie开你网站..

  11. zwwooooo China Mozilla Firefox Windows

    哈,的确是,我喜欢这样用 0 1px 0 8)

  12. 西门 China Mozilla Firefox Windows

    闲逛,到处看别人网页HTML代码,发现你博客的标题标签很多都用错了,比如什么地方用H1,什么地方用H2等等。希望你去查查,合理的运用标题标签,对搜索有好处,反之会被搜索认为是作弊。 :-P

      • N China Google Chrome Windows

        @HzlzH: 我说下午西门问我要不要告诉某个博主他的错误,我还跟他说那肯定要说了呗,原来就是自力博主你啊 :-D ,WP果然是一个圈

  13. 瘦腿不是秘密 China Maxthon Windows

    我的设置也是差不多 多谢啦··

  14. 书香阁免费网 China Internet Explorer Windows

    学习一下
    书香阁留个小脚丫,以后常来往哈

  15. 好东西分享 China Internet Explorer Windows

    wordpress样式兼容性比较好

  16. 静夜燃香 European Union Mozilla Firefox Windows

    一样是13号雅黑啊……阴影以前想用,但是对眼睛不好,只选了链接和标题有效果。

  17. joomla China Mozilla Firefox Windows

    特地使用IE5.5浏览自力博客的飘过,并表示压力不大。

      • joomla China Mozilla Firefox Windows

        @HzlzH: 我擦,杯具了,被看出来了

  18. 学夫子 China Internet Explorer Windows

    emlog的飘过 :oops: :arrow: :?: :-|

  19. 掌柜的马甲 China Mozilla Firefox Windows

    本文无视 IE 及其全家…

  20. 熊猫君 China Google Chrome Windows

    不错~学习了~

  21. A.shun China Opera Windows

    我也用着13px。。虽然有人说偶数的比较好。
    但我就觉得这个大小合适

      • alexin China Google Chrome Windows

        @HzlzH: 哈哈,13,我喜欢,字体13也不错

  22. Mini Dragon China Mozilla Firefox Fedora Linux

    从来只管firefox下效果的路过

  23. 学夫子 China Internet Explorer Windows

    不用啊!用着舒服就OK了,呵呵

  24. Rusaer China Opera Windows

    这主题真不错,很漂亮,关键是看了舒服

      • Rusaer China Opera Windows

        @HzlzH: 呵呵,谢谢。荣幸,不过我最近懒了

  25. 小邪 China Google Chrome Windows

    哎,这主题越来越漂亮了,怨念啊!!!!!!! :evil: :evil: :evil: :evil:

      • 小邪 China Google Chrome Windows

        @HzlzH: 嘿嘿,那套表情特猥琐,刚好能让我表达出自己淫荡的思想感情 ~

  26. 久爱珠宝 China Maxthon Windows

    文字还是不要太小,我觉得14px还可以,太小了让我们这些近视眼怎么活啊

  27. alexin China Google Chrome Windows

    嗯,学习了。正在打算把字体搞大呢。

  28. 亿品元素 China Internet Explorer Windows

    无视IE的,好多代码

  29. snowxh China Mozilla Firefox Windows

    5、选中文章颜色设置:
    这个怎么通过w3c捏 :wink:

      • snowxh China Mozilla Firefox Windows

        @HzlzH: 已经通过鸟 全扔js里了! :-D

  30. 求索阁 China 360 Browser Windows

    写的很细啊~学习了· :)

  31. Weitian Zhao China Google Chrome Windows

    我发现最近很多东西都是和你学的 :-D

  32. woniuren China Google Chrome Windows

    研究了一阵 终于学会把正文变成14px :cry:

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">

:wink: :twisted: :roll: :oops: :mrgreen: :lol: :idea: :evil: :cry: :arrow: :?: :-| :-x :-o :-P :-D :-? :) :( :!: 8-O 8)

Pingback & Trackback

  1. zSnos(Veezy Edition) 主题折腾手记 | Weitian Zhao's Blog United States WordPress Unknow Os - Pingback on 2011/02/27/ 23:07