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

Question

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

为了简洁明了，我有一个带有菜单栏的网页，我在其中使用了来自“Google Web Font”的压缩字体:

<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，这很不幸，因为设置字体/大小对是更多人应该做的事情。大卫沃尔什写道 an article关于 Google Fonts API，并提到了 JavaScript 字体加载器提供的一些方法。

通过使用非 webfont 样式定义替代主体类，您可以使用 inactive 回调来触发函数以应用该类。

有一些方法可以满足您的要求，但并不可靠，而且无法使用 Google Webfonts，因为您无法控制向 Google 服务器发出的请求。