如何修改主题模板的默认字体大小

好玩代码 1年前 (2019) 茶克拉
1,555 0

不可否认的是,WordPress的模板给我们的编辑工作提供了很大的便利。

但可惜的是,大多数的主题模板都出自外语人群,对中文文字的使用感受有很大的不同。

我最常碰到的问题,就是模板默认的字体大小看着很不舒服。

要么小小的字体排的密密麻麻,要么很大很粗矿像大字报。

文字作为作者表达想法给读者最直观的媒介,应该得到重视。

本文主要讲两个点,如何修改默认字体的大小尺寸和如何定位字段。

修改默认字体大小 (FONT-SIZE)

我们所要修改的文件是style.css,这个文件在WordPress后台-外观-Theme Editor,默认第一页就是这个文件了。

另外打开我们的文章页面,划取一段文字,然后右键点击“审查元素”,或按F12打开浏览器编辑器。

这时候,左侧的Elements项目已经定位了划取的文字内容,而右侧则是相应的样式表(css)。

拖动列表滑块,在右侧的样式表中查找有关font-size的字段,

Font-size有3种数据类型,百分比(100%),像素(px),相对值(em/rem),

如果你那WordPress默认模板来练手,你一般看到的都是px值,默认14-16px,

那么,你想把字体改大一点,就把这个font-size: 16px修改为font-size: 20px,就这么简单。

注意,在这里我建议是在浏览器的样式编辑器中直接修改,因为浏览器的样式是保存在缓存里的,我们可以在这做实验。

刚刚打开了“审查元素”,编辑器右侧框找到font-size字段,修改数值,然后你马上可以在显示的页面内容看到变化。

样式表里可能分了很多个font-size等,可能还要包括body,header之类的前端内容知识,

对于无编程经验的人群,我建议就是在浏览器样式表编辑器慢慢试,慢慢改,

确认好具体的数值后,再回到wp后天修改css样式表并保存。

如何定位数据字段

在修改的过程中,我们也会碰到一些小问题,例如,如何定位数据字段。

什么意思呢?在“审查元素”编辑器里,你可以在右侧的样式表框里找到你想要的数据字段,

但是在CSS编辑器里,面对几千行代码,你又是如何去找到这些数据字段呢?这里有个技巧。

浏览器的样式表编辑器里,它其实按项目已经将元素都切分开来显示,

我们找到了我们想要的font-size字段,在这个项目右上角,有style.css:4382这么一项备注。

style.css就是样式表的名称/或是备注名称,4382就是这个字段在样式表里定位的行数。

那么就很简单啦,直接在后台样式表编辑器里,下拉翻到4382行就可以找到相应的字段。

修改行距

相同的方法,我们还可以用来修改行距,行距是line-height。

需要注意的是,包括font-size,在主题作者的设计意图下,css样式表会出现多个font-size或line-height字段等。

不要觉得我改了一个font-size,就全部的段落字体大小都变了。

特别是WordPress升级到5.2版本加入了新型编辑器以后,标题框,文本框和图文框等在前端有不同的表现。

当然主题作者有对这些进行设定,我们要做的就是,在浏览器样式表编辑器里尽量多折腾,确认自己想要的效果。

再回到后台去更改css文件。又一次提及这个细节,你懂的,这很重要。

版权声明:茶克拉 发表于 2019-05-14 11:11:53。
转载请注明:如何修改主题模板的默认字体大小 | 茶克拉驿站

暂无评论

暂无评论...