杂时代折腾小记

2015-09-18 23:23

 

字体:微软雅黑

也许是时间一长的视觉疲劳,乌鸦觉得杂时代文章页的字体 CSS 有点不合适,字体间距太过于拥挤,阅读中会发生不知道看到哪里的情况。相对于简书那种享受纯阅读的舒适感,乌鸦决定修改文章页字体 CSS 样式。

 

杂时代的 font-family 有如下几个:doublevregular、Microsoft YaHei、Trebuchet MS、Verdana、Tahoma、Arial、sans-serif。可能会多了一些,网友们的推荐就简单很多,例如:font-family: “Microsoft YaHei”, Helvetica, Serif, Verdana;

 

下面就是微软雅黑字体在wordpress下的个人觉得很不错的视觉显示 CSS 样式。

这样调整字体 CSS 以后是不是感觉更好点?更有利于阅读呢。 

 

 

关于 Google Font 

WP 后台速度慢,有一部分原因是因为……(你懂的)将 google 的服务止于墙外,乌鸦原来整理过一篇博文:《解决WordPress不停加载fonts.googleapis.com

 

不过,那篇博文的解决方法就现在的情况来说已经不是很理想了,所以乌鸦又重新寻找其他的方法,终于在 WP 酷上找到了两个方法:

 

A、直接后台禁用 Google Open Sans 字体,以绝后患。

B、将 WordPress 后台的 open-sans 字体加载源从 Google Fonts 换为360 CDN

 

这两个方法其实都不错,我选择了后者,毕竟在修改代码的时候也是学习的过程。将下面的代码添加到主题的 functions.php 即可在后台和登录界面更改字体加载来源(如果你用的是和我一样使用 mufeng 大神的 lovephoto 主题,那么下面的代码则添加到 mfthemes-function.php 内):

  

 

关于代码高亮

乌鸦偶尔也会将自己折腾出来的一些代码分享出来,所以也不时的使用代码高亮,网上有很多的在线代码高亮,可是我还是选择了安装代码高亮插件:Crayon Syntax Highlighter不为别的,就只是图个省心省力。

 

Crayon Syntax Highlighter 特点:

集成主题编辑器
切换行号
复制 / 粘贴代码
在新窗口中打开代码
支持 bbPress
自动获取博客文章 / 评论中的<pre>…</pre> 进行高亮
远程请求缓存
可以在一个代码框内混合语言高亮显示
支持迷你标签,如 [php] [/php]可以在行内调用代码高亮
支持<pre> 标记
手机 / 触摸屏设备检测
鼠标事件交互(例如在工具栏上双击可以全选代码)
Retina!
文件扩展名检测
设置实时预览
支持修改尺寸,边距,对齐方式,字体大小,行高……

该插件支持的语言:ABAP、ActionScript、AmigaDOS、Apache、AppleScript、Arduino、Assembly、AutoIt、C、C#、C++、CoffeeScript、CSS、Delphi/Pascal、Diff、(thanks、to、omniavin)、Erlang、(thanks、to、Daniel)、Go、Haskell、HTML、(XML/XHTML)、Lisp、Lua、Microsoft、Registry、MIVA、Script、Monkey、MS-DOS、MySQL、Java、JavaScript、Objective-C、Perl、PHP、PostgreSQL、PowerShell、Python、R、Ruby、Scheme、Shell(Unix)、Transact-SQL、TeX、Vim、Visual、Basic、YAML……

 

 

关于 Footer

把原来的 footer 样式做了修改,扁平化、色块化,并把 footer 宽度调整为Full Sreen,这样就使得底部看起来更清晰了。

 

具体修改了 base.css 文件中的 #footer .bd 项中的 width,由980px 改为 100%;删除 text-shadow,添加 background-color: #313131;

 

 

关于“返回顶部”按钮

重新调整“返回顶部”按钮的CSS,修改 base.css 文件中:

注释了height:90px;width:16px;border:1px solid #b3b3b3;

修改了background-color的色彩值,由 #fff 改为 #313131

修改了 mfthemes-header.php 文件中的一小点代码

 上面代码中的“back to top”部分被我删除,不要了。


以上,便是乌鸦近期折腾的笔记。


网友评论3条

  1. 苏城  − 2015-09-18 23:23 回复TA

    Crayon Syntax Highlighter插件分享一下

    • 杂时代 zatime.com  − 2015-09-18 23:23 回复TA

      [汗]在wp后台安装插件处,搜索Crayon Syntax Highlighter,就可以看到了……

  2. 项目管理李翔宇  − 2015-09-18 23:23 回复TA

    嗯,最近工作忙了,很少来,勿怪勿怪。