运维wordpress过程中,遇到一个问题,博客文章的字体太大,却总是无法修改成功。 按照网络资料,修改h2对应的font-size的值,更新后却没有生效。这个问题折腾了好久让我头疼不已。
用Chrome浏览器右键博客标题,检查元素,在右边找到对应的CSS代码。 此时才发现,与显示字体大小有关的不止有之前配置好的10px(这已经是很小的字体,决不可能是图中看起来那么巨大),还有一个值font-size值:2.0625rem
font-size: 10px;
font-size: 2.0625rem;
可以看到,有两个font-size,鼠标点选,发现(2.0625rem)这个值是导致字体修改不成功的原因。 来看看CSS源码。
cd /var/www/html/wordpress/wp-content/themes/twentysixteen/
vim style.css
避免麻烦,直接将CSS文件中所有的(2.0625rem)更改为(1.0625rem),可以看到,在开发者模式下,字体更改已经生效。但在常规模式下却并没有生效。
原因 在不同的屏宽模式,有不同的rem值和px值共同决定字体大小。需要在不同的模式下分别调整px值与rem值才能真正的解决问题。
到这里,问题并没有完全结束。引用一篇博客:http://www.cnblogs.com/3body/p/5416889.html 将相关内容学习后结论如下:rem和px有什么区别和关系? rem是相对字体大小,px是绝对字体大小。rem值的实际效果会继承父对象设定的px值。 引用:rem的浏览器支持……目前大多数浏览器都支持rem单位的字体大小,不过,要想兼容IE7和IE8,你还是需要使用px来做单位。
基于以上内容,调整字体大小的方法基本已经确定,修改style.css可以有效果。但如果想要进一步达到预期效果,还需要继续努力。