Yo2教程——无痛自定义模板字体

首先声明,我也是菜鸟,只是把自己摸索的东西告诉大家,有不对的欢迎指出,让高手见笑了。

WordPress的漂亮主题很多,但大多是老外的作品,所以对中文显示的支持较差。一般来说,我们不做设置的情况下,显示的中文字体是系统默认字体。很多人喜欢微软雅黑字体,那么,怎样让自己的blog使用微软雅黑呢?每次都使用<font face=”XXX”>文字部分</font>语句来定义显然很费力,我们很容易想到去修改CSS样式表。说道类似CSS、php之类的,可能菜鸟要抱怨了:别跟我提那些深奥的东西!呵呵,其实我也是菜鸟,大家讨论而已。下面介绍一种方法,让菜鸟轻松更改CSS实现字体更改,以及其他有用的应用。如果你不是Firefox用户,请安装Firefox,相信yo2的用户大部分都有装Firefox,因为侧边栏的拖放删除好像只支持Firefox。

首先我们需要安装一个插件——Firebug,点这里有安装。这是个强大的插件,不多讨论,下面说说怎么查找并更改我们想要的CSS。安装完成后到我们的blog页,点击状态栏的的臭虫图标或按F12唤出Firebug。在想要修改的地方,比如我想修改标题的字体样式,就在标题上右击,选择“查看元素”,下方的Firebug就会显示它的HTML结构和CSS样式,如图:点击看大图
snap8.jpg

现在可以看见CSS样式表里,标题字体的样式代码:(这是我的模板CSS,众所周知,模板不同,CSS也会不同)

h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a

color:#000000;

font-family:Arial,Helvetica,sans-serif;

最后一行是字体,表示:此位置的字,先查找Arial字库,若有,则使用Arial字体,若没有,则向下查找使用Helvetica字体……以此类推,可以概括为前方优先。以上代码的效果如下:
snap3.jpg

英文部分使用了Arial字体,浏览器在查找后面的字体样式都没有以后,使用了系统字体宋体来显示中文。最后的sans-serif表示字体属于sans-serif无衬线字体。知道这些,就可以改样式表了,我们先在Firebug里试验。比如我想用雅黑,可加入”Microsoft YaHei”,加在哪里呢?我们已经知道前方的优先了,如果我们想让标题里的英文使用Arial字体,中文使用雅黑,可以加在Arial之后:
font-family:Arial,“Microsoft YaHei”,Helvetica,sans-serif;
效果如下:
snap4.jpg

浏览器查找Arial字体,英文部分字库里有,中文部分字库里没有,则查找“Microsoft YaHei”(雅黑),字库里有这些字,就是用了雅黑显示。需要注意的是,IE和Opara不吃这套,若第一个查找不到就直接调用系统默认字体:如下图:
snap3.jpg

汗吧?我估计这也是他们说“和IE打架”的原因之一。还是不要混用了。 统一用雅黑吧,则加在最前。
font-family:“Microsoft YaHei”,Arial,Helvetica,sans-serif;
效果如下:各浏览器都能显示正常的雅黑了。
snap5.jpg

我这样罗嗦,是为了讲解下面的应用。现在还有很多人的系统里并没用雅黑字体,我们知道了这种优先规则,就可以来照顾这些用户了,我们这样考虑,没有雅黑的用户会看到黑体字的标题。那么很容易得出:
font-family:“Microsoft YaHei”,SimHei,Arial,Helvetica,sans-serif;

但是这只适用于Firefox和safari用户,IE和Opara只会显示系统默认的宋体。

我说过我是菜鸟,我打不过IE,以后去问高手再说吧。

实验成功之后,到后台的外观—私有模板—自定义私有模板里修改CSS样式表的相应部分就可以了

下面是一些主要中文字体的英文名

  • 宋体——SimSun
  • 隶书——LiSu
  • 楷体——KaiTi_GB2312
  • 幼圆——YouYuan
  • 黑体——SimHei
  • 雅黑——Microsoft YaHei

11 Comments to This Post

Add a Comment
  1. 沙发。你懂得还真不少。学习了!

    回复

    armgod:

    @麦田 我只是把摸索出的东西分享下而已,其实我是菜鸟……

    回复

  2. firebug十分弓虽大。

    回复

  3. 请问贴的图片怎么实现点击看大图?

    回复

    armgod:

    在后台开启Lightbox JS v2.2 Plugin插件,用yo2自带的插入图片功能,选择缩略图链接到文件功能。用相册外链的图片需要有大小两个图,小图链接给大图

    回复

  4. 知道了 谢谢

    回复

  5. 中文字体貌似可以直接写名字吧,例如”宋体”,”黑体”等,我认为CSS中可以直接定义中文字体啊

    回复

  6. 好物!我竟然守着强大的firefox不知如此强大的插件。谢谢啦,安装尝试一下^^

    回复

  7. 来瞅瞅

    回复

  8. 这个是重点,
    宋体——SimSun
    隶书——LiSu
    楷体——KaiTi_GB2312
    幼圆——YouYuan
    黑体——SimHei
    雅黑——Microsoft YaHei

    回复

    Armgod:

    @IT不倒翁, http://goo.gl/pr40q 这里更全面

    回复

添加评论

邮箱不会被公开, 标有 *的是必填项

*
*