Question

我在这里和谷歌搜索了几个小时，但我找不到任何关于我的问题的线索，或者我找到了一些非稳定或支持不佳的解决方案的答案。

为了简短明了，我有一个带有菜单栏的网页，我使用了＃34; Google Web Font＆＃34;中的精简字体：

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz&amp;subset=latin">

然后我有这样的CSS：

.menu {
    font-family: 'Yanone Kaffeesatz', 'Trebuchet MS', Arial, Helvetica, Sans-Serif;
    font-size: 23px;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
    text-transform: uppercase;
    text-align: left;
}

我想要做的是将font-size: 23px;分配给font-family: 'Yanone Kaffeesatz'，将font-size: 18px;分配给font-family: 'Trebuchet MS'，等等。

为什么我要这样做？因为如果用户离线或无法从http://fonts.googleapis.com下载字体，布局就会搞乱，因为23px适合缩写字体“Yanone Kaffeesatz”，但对其他人来说非常大（几乎是宽度的两倍）。

有没有办法做这样的事情？（只是为了解释这个概念）

font-family: 'Yanone Kaffeesatz'[size:23px], 'Trebuchet MS'[size:18px], Arial[size:20px], Helvetica, Sans-Serif;

Answer 1

Sass在这里实际上并没有帮助，因为它实际上并不在客户端上运行。 Sass只是编译成CSS。另外，我很确定没有真正的方法可以让CSS设置各种字体系列/大小对。

我知道这并没有真正解决你的“同一类”的问题，但据我所知，最好的方法是使用JavaScript，这非常不幸，因为设置字体/大小调整对是更多人应该做的事情。 David Walsh撰写了an article关于Google Fonts API的文章，并提到了JavaScript字体加载器提供的一些方法。

通过使用非webfont样式定义备用body类，可以使用inactive回调来触发函数以应用该类。

有些方法可以按照您的要求进行，但不可靠，而不是使用Google Webfonts，因为您无法控制对Google服务器的请求。

Answer 2

您可以使用CSS预处理器Sass进行尝试。 Sass提供了CSS样式的条件实现。

在这里：

条件和＆amp;控制结构

https://gist.github.com/chriseppstein/674726

Answer 3

这个问题已经收到SO的回答。例如：

此外，还有几个外部参考，如：

希望这些帮助： - ）

如何将具有单个字体大小的多个font-face分配给同一个类

3 个答案: