javascript - 更改字体系列后调整所有字体大小

Question

我有一个关于更改所有 font-size 的问题。我用下面的字体设计了一个响应式网页:

font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;

并且为了使其具有响应性，对 font-style 属性进行了如此多的媒体查询。

#menu li{
    font-size:12px;
}
@media only screen and (min-width: 768px) {
#menu li{
    font-size:14px;
}
}
@media only screen and (min-width: 1000px) {
#menu li{
    font-size:16px;
}
}
@media only screen and (min-width: 1300px) {
#menu li{
    font-size:17px;
}
}

我的网站上有很多这样的类，如果我更改字体系列，那么很难在所有媒体查询中修改所有这些类。我更改字体系列:

font-family: 'Merriweather', serif;

字体来源是:

<link href='https://fonts.googleapis.com/css?family=Merriweather:300' rel='stylesheet' type='text/css'>

所以它是最轻的字体，不幸的是，它的 16px 大于 Cambria 字体的 16px。我有一个可以将字体缩放 0.9 的 jQuery 解决方案:

$(document).ready(function(){
    $('*').each(function({
       $(this).css('fontSize',$(this).css('fontSize').split('px')[0]*0.9);
    })
})

但问题是代码会干扰对调整大小事件的响应。那么是否有人对此有纯 css 解决方案。非常感谢你的帮助。

Answer 1

一般的解决方案是在 html 和/或 body 的规则中定义一般的“基本”字体大小，并在所有其他规则中使用 em、rem 或百分比值:em 将始终相对于其父元素，rem 将始终相对于根大小(即 html)。

因此在这些情况下，您可以简单地在 html 的媒体查询中设置不同的规则，例如 html { font-size: 15px; }(或 16、14、12 或任何 px，基本上就像您在上面所做的那样)。如果所有其他字体大小都是 em、rem 或百分比，则所有字体大小都将根据该规则并与之相关地更改。