用WordPress什么都好,用来用去,总是觉得少了点什么。在纠结博客名字的时候,才注意到了!WordPress没有字体选项!!!不管是定义博客标题(某些主题会提供),还是发博文的时候,从来都没见到任何的字体选择界面。
然后首先是想到去插件库找找。屁颠屁颠的跑过去一看,果不其然,用fonts作为关键字,有572个插件!!看起来选择字体还是有非常大的需求的,真心希望以后WordPress能够内置。

然后,就是下载插件,安装插件,配置插件,删除插件。。。为什么要删除呢?因为我的空间商禁止使用API调用,而那些字体插件都需要从Google Fonts或是Fonts.com调用远程字体。无奈只能作罢。但是,忽然发现一个全局设置的插件——google-fonts。这个插件,在安装完之后,会出现在仪表盘=》设置=》Google Fonts之中。进入后可以发现,该插件可以定义全局10个标记的字体。分别是
All (body tags)/*全部*/
Headline 1 (h1 tags)/*一级标题*/
Headline 2 (h2 tags)/*二级标题*/
Headline 3 (h3 tags)/*三级标题*/
Headline 4 (h4 tags)/*四级标题*/
Headline 5 (h5 tags)/*五级标题*/
Headline 6 (h6 tags)/*六级标题*/
Blockquotes/*引用文段*/
Paragraphs (p tags)/*文章正文*/
Lists (li tags)/*序号式/非序号式列表*/
字体的列表非常非常的之多,但却没有提供预览!只能选择一个,保存一次,刷新一次才能知道是什么效果。
这样对某个标记的字体自定义不错,但是还是没法满足自由切换字体的要求,那该怎么办呢?
方法还是有的,今天的重点来了!
- 上传你要的字体到网站根目录(便于定位)
- 进入仪表盘=》外观=》编辑,找到style.css
- 复制并修改以下声明,粘贴到style.css中
- 然后,在文章中使用<p style=”font-family:’fontNamer’;”>Your message</p>就可以调用出之前定义的字体了,就像最下面一样
@font-face {
font-family: ‘fontName’;/*其中fontName替换为你的字体名称*/在页面中需要的地方使用该字体:
src: url(‘fontName.woff’) format(‘woff’),/*url之后填写字体文件存放位置,三个src按格式任选*/
src: url(‘fontName.ttf’) format(‘truetype’),
src: url(‘fontName.svg#fontName’) format(‘svg’);
}
字体预览:Web Fonts Test
用这种方法的话,理论上只要你上传了对应字体,在网页上都可以进行展示出来。唯一值得注意的是,中文字库通常都比较大,去掉繁体字和非古体字的一般都还有10M以上,对网页加载速度有非常大的影响。所以还是推荐只更改英文字体哈~
有上面的基础,要想修改博客名的字体,就容易的多了。拿我自己的博客来说
- 上传Mountains of Christmas字体(123456.woff)到小站的根目录
- 添加声明:@font-face { font-family: ‘123456’; src: url(‘/123456.woff’) format(‘woff’);}
- 继续在style.css中找到header小节
- #headerimg h1 为博客名的标记,在{ 后加上一句font-family: ‘123456’, ‘Lucida Grande’, Verdana, Arial, Sans-Serif;即可使用我之前声明的字体“123456”。第一个逗号之后的字体是用于万一此字体无法加载的情况。
OK,就是你现在看到的样子啦~今天的教程就这样了哈~