修改博客标题的字体

选择的这个主题,博客标题是宋体字,但是宋体的“传习录”不好看,而副标题的斜体字又太小,看不清楚,所以决定要修改这两个地方的字体。依旧在网上搜索怎么改标题的字体和大小,看了几篇,都没有明确的说解决方案的,但都说要改css,于是只好硬着头皮去看代码了。

在wp后台的『外观』菜单下,进入“Editor”页,这里是wp提供修改主题文件的地方,右侧一栏列出了一个主题所包含的所有配置文件,又具体分为“模板”和“样式”两类文件:模板定义了博客各类页面的布局和框架,就好比盖房子盖什么结构,几厅几室几个卫生间,门窗开哪里;样式则定义了各个页面的文字、图片、段落等元素具体怎么显示,就好比装修的时候地板是铺实木地板,还是铺地砖,是装美式风格还是地中海风格亦或田园风格……扯远了。

既然搜到的帮助说要改css,那我就直奔样式区去找文件,结果发现了4个样式文件:

  • 一个叫RTL样式表(rtl.css),我估计这个是定义从右往左写(Right-To-Left)的版面样式的,于是跳过;
  • 下一个是Visual Editor Stylesheet(editor-style.css),我估计这个是定义可视化编辑器的样式的,也就是码字的那个对话框的样式,于是跳过;
  • 在下一个是editor-style-rtl.css,看来是从右往左写的可视化编辑器的样式,继续跳过;
  • 最后一个是样式表(style.css),看来只能是它了,于是选中。

然后在屏幕中间的多行编辑框里,就显示出了这个style.css文件的内容,感谢作者,写了很清晰的注释,感谢过去的教育,让我能猜出来哪段是注释。

仔细看了一遍style.css,里面的内容多半是:

css code   
#xx[,xx,xx] {
	yyyy: zzz[, zzz];
	[yyyy: zzz[, zzz];]
}

这类结构(这里我借用了[]来表示可以出现也可以不出现的内容,来完善这个结构的表达)。

根据我以前学过的一点点HTML语言的常识,我发现xx类文字,大多和HTML中标记页面元素的关键字相似,比如table,body,h1,h2,head等等。而yyyy类则是类似margin, border, vertical-align, font-family, font-size这类描述样式类型的关键字,最后的zzz则是具体的数值、内容,比如字体名称、对齐基准名称等。于是我发现css其实不难理解,它的结构是一个三段式的表达:

css结构   
#页面元素{
	样式类型:设定值;
}

既然是这样,那就方便了,我只要改写head的样式就能达到目的了。更好的是,要感谢主题作者,清楚的把页面每一位置的样式设定用换行隔开,并在每段开头做了说明,所以当我看到一段这样的注释:

/* =Header
-------------------------------------------------------------- */

我意识到,下面就有我要改的内容了。

注释向下,定义了5段内容,分别是:

  • #header 定义头部的样式,具体不清楚
  • #site-title 定义博客名称的样式,就是我嫌字体不好看的地方
  • #site-title a 定义博客名称的辅助样式
  • #site-description 定义博客描述的样式,就是我嫌字号太小的地方
  • #branding img 定义了我博客名称下方那副装饰图的样式

这样,我在#site-title一段里加入下面这行:

font-family:华文行楷;

就把博客名称的字体改了,然后把font-size和line-height的数值相应调大了一点,以取得更好的视觉效果。

接着我在#site-description一段里加入了这行:

font-size:18px;

就把博客描述的字号调大了,再没有因为字号太小导致的比划扭曲了,看着也舒服很多,就是现在博客头部的样子。

OK,上面是一个对CSS完全不懂的菜鸟作出的一点探索,希望对其他还没敢动手的菜鸟是一个帮助。

Share

252 views

关于Alex

一生俯首拜阳明
此条目发表在习·网站搭建分类目录,贴了, , 标签。将固定链接加入收藏夹。

修改博客标题的字体》有 2 条评论

  1. wantfee说:

    华文行楷的字体效果在大部分的电脑上效果是看不到的,因为大部分人的电脑里根本没装这种字体。

    • Alex说:

      呵呵,謝謝提醒!所以其實我發完這篇後就把字體調整了,現在用的是正楷體,大多數windows系統裡都默認帶的,而且是web安全的。不過在ios的safari瀏覽器裡仍然是顯示apple特色的黑體(我不知道字體的具體名字,慚愧),總體來說也不影響效果。

发表评论

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

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>