修改chrome中HTML元素,借助Chrome的审查元素修改⽹页的
字体
许多⽹友和Quicl⼀样,默认主题的字体不好看之,为了美观就在编辑⽂章时候使⽤CSS弄个字体样式,可是诸不知⽂章使⽤过多的CSS样式对⾸页打开速度有很⼤影响。根除这个问题的⽅式就是修改Wordpress主题默认的字体样式与字号。虽然在今天之前⼀直⽤着修改⽂章css的⽅法,可是昨晚上⽹时间有点长,看⽹站其他字体时候突然感到不拿么爽。遂想到,算了吧,把主题的字体换个吧!
正如之前⽂中所说的,FireFox我真的不想再⽤了,就⽤刚⽤不久的Chrome来进⾏元素审计。Chrome太⼈性化了,⾮常的⽅便,选择主页上⾯任意的⼀段⽂字-右击-审查元素,即可看到当前内容的CSS容器了。查看之后发现,我的⼦容器⾥⾯根本没有font-family: 以及
font-size:。好吧,既然con⾥⾯没有那我就去⽗容器⾥⾯,⽅便的ChromeDebug⾮常直观的显⽰出Font-family以及Font-size均在Body中。源CSS代码为;
font-family:Arial, Helvetica, sans-serif;
font-size:12px; color:#b8babb; text-align:center;
好看的css代码
关于考虑到⼀般我喜欢“微软雅⿊”,那就修改为“微软雅⿊”,可是字号呢?⽹上查看了许多之后其⽂字都说12px是最佳选择,我可不这么认为!使⽤Chrome的元素审查发现,我原来主题的Body字体⼤⼩就为12px,可是感觉很⼩。在浏览博友的站点时候,发现有好⼏位都为13px,得,就这么定了。⽤13px的字号吧。温馨提⽰:对于⼴⼤的Wordpress玩家来说,修改主题之前最好在本地把适合的css样式所确定。其次为了避免不可预料的出错,请将代码复制到“超级记事本”或者“Dreamwaver”备份,使⽤系统⾃带的记事本灰产⽣莫名其妙的问题。此⽅法对于任意主题都可⽤使⽤,由于其Wordpress主题的字体都在Body标签中,我们修改的思路就是到顶级Body容器,修改其字体就好了。下⾯带⼤家⼀同修改主题:
在Wordprss后台使⽤管理员权限登录——选择“外观”栏⽬中的“编辑”选项卡 再转⼊的页⾯中的右侧最下⾯到“Style.css”,点击它。
左边编辑框中的最上⾯就是Body栏⽬,body代码(相信绝⼤部分的代码和我这个⼀样)如下所⽰:
body { margin:0; padding:0; background:url(img/back1.gif);
font-family: Arial, Helvetica, sans-serif;
font-size:12px; color:#b8babb; text-align:center; }
在Arial之前添加微软雅⿊,宋体记住这个逗号是英⽂逗号,⼤家注意啊!font-size中把12px修改为13px,有朋友可能会说这么简单啊,那我把color也修改了吧!⼤量事实证明,修改color是个不明智的选择。主题的制作者⽐你更加懂得⽹站配⾊的问题,你的修改可能会使主题颜⾊⾯⽬全⾮
下⾯是修改后的代码,
body { margin:0; padding:0; background:url(img/back1.gif);
font-family: 微软雅⿊,宋体, Arial, Helvetica, sans-serif;
font-size:13px; color:#b8babb; text-align:center; }
保存修改后,回到任意页⾯,刷新其,⼀般就可以看到效果了。如果你不能看到,请清空⽹页缓存即可!

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。