使用Chrome修改任意WordPress主题字体样式与字号

  许多网友和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;

  关于考虑到一般我喜欢“微软雅黑”,那就修改为“微软雅黑”,可是字号呢?网上查看了许多之后其文字都说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是个不明智的选择。主题的制作者比你更加懂得11519.html">网站配色的问题,你的修改可能会使主题颜色面目全非

  下面是修改后的代码,

  body { margin:0; padding:0; background:url(img/back1.gif);

  font-family: 微软雅黑,宋体, Arial, Helvetica, sans-serif;

  font-size:13px; color:#b8babb; text-align:center; }

  保存修改后,回到任意页面,刷新其,一般就可以看到效果了。如果你不能看到,请清空网页缓存即可!

  本文由Quicl原创于Quicl’sBlog 转载注明出处http://20xue.com/?p=1781

时间: 2024-08-01 20:34:30

使用Chrome修改任意WordPress主题字体样式与字号的相关文章

wordpress主题支持自定义菜单及修改css样式实现方法_Delphi

自己在制作wordpress主题的时候遇到这个问题,并且遇到了css样式错误,其实很简单,操作如下: 在主题中functions.php中加入: register_nav_menus( array( 'menu' => __( 'menu', '' ), ) ); 在主题导航栏贴上导航代码: <?php wp_nav_menu( 'id=navbar' ); ?> 但是出现了css样式错误: 原来这个函数输出的是下面的格式: 复制代码 代码如下: <div id="men

修改360浏览器字体样式的方法

  无论是windows系统下默认的IE浏览,还是第三方智能浏览器,在浏览器中的默认字体大小都是一样的,而对于一些使用来说,如果看厌了默认的字体样式,那么赶快通过下方小编提供的方法,来自定义修改自己所喜爱的字体吧! 操作方法 1.进入浏览器的设置选项. 2.在左边的[高级选项]一栏找到[自定义字体]. 3.接着在标准字体中改变你想要的字体. 由于360极速浏览器的内核是采用谷歌chrome浏览器的内核,所以360极速浏览器设置字体的方法同样适用于chrome浏览器,小伙伴们快去试一试吧. 通过上

高德地图怎么修改提示框的样式和里面的字体样式,求大神DOME啊

问题描述 高德地图怎么修改提示框的样式和里面的字体样式,求大神DOME啊 addMarker(new MarkerOptions().position(Constants.NANJING).draggable(true) .title(""新城科技园"").snippet(""建邺区奥体大街69号新城科技园4栋新城科技园"")); 修改提示边框和字体. 解决方案 http://lbs.amap.com/fn/css-style

修改 Chrome 调试器为黑底白字样式

"调试是比编码更高深的技术",个人认为此话当属不假,有舒适的调试环境更是不言而喻.话说本人换用 Chrome 浏览器之后,一直对其内置的调试器 Developers Tools 爱不释手,简直成了最不可或缺的工具.后来得知 Developers Tools 竟出自Firebug 原设计师之手,怪不得越来越好用!的确,作为网页程序,强大得已经完全看不出它有什么非原生程序的痕迹,宛如与 Chrome 融合一体,不曾想却乃内置浏览器的玄机--想必底层组件的通讯用 JS 应该不能做吧? 书归正

如何添加Google字体到你的wordpress主题

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 Google Web Fonts 免费为你的博客提供安全而漂亮的字体服务.通过使用Google Web Fonts,你的博客不用上传任何字体,就能显示除了常用的"Arial", "Verdana"等字体之外的其它字体. 众所周知,网站可读性取决于它的设计和外观.网页设计中扮演最重要角色的字体,使用的什么

Android修改字体样式的示例代码

在Android实际开发中根据UI的设计图,经常要去改变系统默认的字体样式 这样做会使apk变大很多啊 而且为什么android要使用ios的字体-_-# 单独设置字体样式 (1)Android系统提供了几种字体样式可供选择 通过设置typeface属性或者fontFamily属性设置 typeface属性: normal serif sans monospace fontFamily属性: casual cursive serif monospace sans-serif sans-serif

Wordpress主题和网站设计开发手册和资源

wordpress拥有很多的帮助开发插件,这里我们推荐如下免费插件: Debug Bar: 任何开发者都可以使用这个插件,帮助你更简单的展示查询,缓存,PHP警告等等相关debug信息 SyntaxHighlighter: 语法高亮插件,帮助你更好的阅读和编写代码 CMS Tree Page View: 提供非常方便的服务.允许你按树状结构访问所有的页面 WP Google Fonts: 帮助你更简单的使用web字体 Broken Link Checker: 查看网站的死链或者重定向. Redi

教你设计自个儿的WORDPRESS主题

  几个月前,我应Slocum Themes之邀接受一项挑战,为博主们设计wordpress主题.理念是运用所有wordpress默认功能,创造一款简洁有效的主题. 我决定从社交媒体汲取灵感.毕竟,社交媒体的升级版可以被看作微型博客.对于像facebook.twitter.google+和pinterest这样的社交媒体平台如何展示文章,我做了一些研究,尤其是带照片的文章,然后Socialize就诞生了. 设计过程 第一步永远是在纸上画线框图,然后在Photoshop中进行设计,再是编码.鉴于是

不拘一格的商业WORDPRESS主题模板

  新的一年,正是破旧立新的时候,如果设计师们不满足于老旧的布局,呆滞的色彩和杂乱的排版,那就向它们说再见吧.今天搜集的这20+网站模板,一扫老气横秋的风格,创意令人惊奇,来看看,顺道学习下吧. Divi 主题模板-wordpress主题模板"> 简单但不失精致的网站,如果你的客户刚好不需要那么多的内容,这个可能合适哟. Nimble 采用了大胆奔放的颜色,加上有趣的动画效果,堪称前卫之作. Vertex 这个模板几乎适用于任何公司,现代感十足的响应式网站,当然,字体与图像的选择犹为重要.