CSS为字体系列中的每种字体指定字体大小？

Posted 2023-03-06

【中文标题】CSS为字体系列中的每种字体指定字体大小？

【英文标题】：CSS specify font-size for each font in font-family?

【发布时间】：2011-06-13 04:43:39

【问题描述】：

如果使用的字体太大（实际上是太宽），我的主导航的布局将不正确地移动。

字体系列中的第一种字体在特定字体上看起来很棒，但是第二种字体（如果没有第一种字体将使用）太宽并且会改变布局。

我确实找到了this similar quesiton，这是因为字体太高了。答案是使用ex 单位，因为它基于高度。

是否有一个我可以用于宽度的单位，或者有没有办法为字体系列中的每种字体指定字体大小？

【参考方案1】：

考虑提供类似的字体作为替代。例如：

font-family: Arial, Helvetica, sans-serif;
font-family: Tahoma, Geneva, sans-serif;

这样，替代字体不会破坏布局。

【参考方案2】：

对于字体，我建议使用标准类，例如 x-small（extremeley small）、small、medium、med-small、large、med-large、x-large 等，并将这些类用于不同的字体大小.只有当你想要一些非常大的东西时，你总是可以使用<h1>, <h2> tags。我会使用 % 作为所有这些的标准。在我使用各种字体时，它们很少会破坏以下使用的类。

.body 
   font-family: arial,helvetica,clean,sans-serif;

.x-small 
    font-size: 77%;
   letter-spacing: normal;

.small 
    font-size: 85%;
    letter-spacing: normal;

.med-small 
    font-size: 92%;
    letter-spacing: normal;

.medium 
    font-size: 100%;
    letter-spacing: normal;

.med-large 
    font-size: 107%;
    letter-spacing: normal;

.large 
    font-size: 114%;
    letter-spacing: normal;

.x-large 
    font-size: 122%;
    letter-spacing: normal;

.x2-large 
    font-size: 131%;
    letter-spacing: normal;

.x3-large 
    font-size: 138.5%;
    letter-spacing: normal;

.strong 
    font-weight: bold;