更改字体系列后调整所有字体大小答案

【问题标题】：Resize all font-sizes after changing font-family更改字体系列后调整所有字体大小
【发布时间】：2016-10-15 10:46:14
【问题描述】：

我有一个关于更改所有font-sizes 的问题。我设计了一个响应式网页，字体如下：

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

为了做出响应，对字体样式属性做了很多媒体查询。

#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解决方案。非常感谢你的帮助。

【问题讨论】：

我会说这可能不是一件容易的事情，但是您应该尝试使用 less 或 sass 预编译器并将所有这些设置设置在变量中。目前，这个问题没有简单的解决方案，如果您希望它正常工作，除了可能对所有实例进行搜索和替换之外。
为什么不以rem 或em 而不是像素为基础。

标签： javascript jquery css fonts font-size

【解决方案1】：

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

所以在这些情况下，您可以简单地在 html 的媒体查询中设置不同的规则，例如 html { font-size: 15px; }（或 16、14、12 或任何像素，基本上就像您在上面所做的那样）。如果所有其他字体大小都以 em、rem 或百分比为单位，则所有字体大小都将根据该规则发生变化。

【讨论】：

【解决方案2】：

一种解决方案是使用相对字体大小，例如em，这样您就不必使用 jQuery 更改所有元素。一个更好但支持较少的相对单位是rem。然后您可以轻松调整整个文档的字体大小：

#menu li {
    font-size: 0.688em;
}

@media only screen and (min-width: 768px) {
    #menu li {
        font-size: 0.75em;
    }
}
@media only screen and (min-width: 1000px) {
    #menu li {
        font-size: 0.875em;
    }
}
@media only screen and (min-width: 1300px) {
    #menu li {
        font-size: 0.938em;
    }
}

document.body.style.fontSize = "90%";

MDN article about length units

另一种方法是为更大的字体创建另一个样式表，您可以在更改字体系列时插入或删除它：

#menu li {
    font-size:11px;
}

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

因为这很复杂，你可能想使用SASS or LESS，然后你可以让字体大小可变。

顺便说一句，使用这么小的字体（在我看来）从来都不是一个好主意！

【讨论】：