Question

我有一个关于更改所有font-size的问题。我设计了一个响应式网页，其中包含以下字体：

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，那么很难在所有媒体查询中修改所有这些类。我改变了font-family：

font-family: 'Merriweather', serif;

，字体来源是：

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

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

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

但问题是代码干扰了对resize事件的响应。那么有人有一个纯粹的CSS解决方案。非常感谢你的帮助。

Answer 1

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

因此，在这些情况下，您只需在html的媒体查询中设置不同的规则，例如html（或16,14,12或任何px，基本上就像您上面所做的那样）。如果所有其他字体大小都在em，rem或百分比中，则所有字体大小都将根据该规则的相关规则而改变。

Answer 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，然后您可以使字体大小变量。

顺便说一下，（在我看来）使用这么小的字体大小永远不是一个好主意！

更改font-family后调整所有字体大小

2 个答案: