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

Posted 2023-03-06

【中文标题】如何将具有单独字体大小的多个字体分配给同一类

【英文标题】：How to assign muliple font-face with individual font-size to same class

【发布时间】：2014-05-16 14:02:24

【问题描述】：

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

为了简洁明了，我有一个带有菜单栏的网页，其中我使用了“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;

【问题讨论】：

您是否考虑过使用 JS 来检测 Google 字体是否加载以及是否从您自己的服务器加载？或者，您可以使用 JS 来检测是否加载了 Google 字体，如果没有设置类（到 de body 元素）并提供替代样式。

【参考方案1】：

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

我知道这并不能真正解决您的“具有相同类”的问题，但据我所知，做到这一点的最佳方法是 javascript，这很不幸，因为设置字体/大小对是更多人应该做的事情。 David Walsh 写了an article 关于 Google Fonts API 并提到了 JavaScript 字体加载器提供的一些方法。

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

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

【参考方案2】：

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

这里是：

条件和控制结构

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

【讨论】：

我不明白。能给我举个例子吗？这将如何在客户端工作？

@allcaps 抱歉，我对 Sass 也不太了解。我只是想说它可以使用它来完成。我得到了寻找解决方案的链接。会回来一些可信的答案。

不用担心。我不认为它可以做到。 Sass 文件将被处理为在网站中提供的普通 CSS。

【参考方案3】：

这个问题已经在 SO 上收到了答案。例如：

css different font sizes on different families Specifying different font-sizes for different font-families Assigining different font-size per each font in one font-family

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

Specifying different font-size for different fonts in a font-family Setting Multiple Font Values

希望这些帮助:-)