杂时代折腾笔记

设计教程 & 文章 2015-09-18 136 次浏览 0 条评论

字体:微软雅黑

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

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

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

font-family: "Microsoft YaHei", Helvetica, Serif, Verdana;
//选择字体
font-size: 16px;
//设置字体大小
line-height: 1.8em;
//设定行高,这里是 1.8 倍字体大小
letter-spacing: 0.06em;
//设定字符间距(字母之间、汉字之间距离),这里是字体大小的 0.06 倍

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

关于 Google Font

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

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

  1. 直接后台禁用 Google Open Sans 字体,以绝后患。
  2. 将 WordPress 后台的 open-sans 字体加载源从 Google Fonts 换为 360 CDN

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

function devework_replace_open_sans() {
	wp_deregister_style('open-sans');
	wp_register_style( 'open-sans', '//fonts.useso.com/css?family=Open+Sans:300italic,400italic,600italic,300,400,600' );
	wp_enqueue_style( 'open-sans');
}
add_action( 'wp_enqueue_scripts', 'devework_replace_open_sans' );
add_action('admin_enqueue_scripts', 'devework_replace_open_sans');
?>

关于代码高亮

乌鸦偶尔也会将自己折腾出来的一些代码分享出来,所以也不时的使用代码高亮,网上有很多的在线代码高亮,可是我还是选择了安装代码高亮插件: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……

(2019 年年初更换主题以后,代码高亮的插件就替换成了 Pure Highlightjs)

关于 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 文件中的一小点代码

<a id="goback" href="#heaader"><em></em><?php _e("back to top", "lovephoto");?></a><!--goback-->

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


以上,便是小编近期折腾的笔记。

广告
广告

发表评论

电子邮件地址不会被公开。 必填项已用*标注