基于字体系列的条件字体大小

Posted 2023-03-06

【中文标题】基于字体系列的条件字体大小

【英文标题】：Conditional font-size based on font-family

【发布时间】：2012-12-19 17:31:48

【问题描述】：

有没有办法在 CSS 或 jQuery 中根据 font-family 编写条件字体大小？

【问题讨论】：

请在您的问题中更具体一些，例如您想要达到的目标

@user1479606 我不了解你，但我发现这个问题非常清楚。不知道为什么它会被否决。

@KonradRudolph 不，不清楚，尤其是当您不知道他当前的情况是什么以及 CSS 如何实现这样的事情时？

@user1479606 好吧，您的第一条评论假装回答了这个问题。那么你肯定知道OP想要什么吗？就个人而言，我不知道如何做到这一点（在纯 CSS 中这是不可能的）。作为参考，我对这个问题的理解是，OP 希望自动缩放不同的字体，以便它们相互匹配，即使它们的原生大小（在 1em 处）不同。

确实是一个非常基本的问题。不要看到任何不清楚的地方。

【参考方案1】：

不是真的。但在某种有限且相对无用的意义上，是的。

在 CSS 中，属性是相互独立的，除非 CSS 规范定义了关系。

在脚本中，你可以做很多事情，但是简单的 jQuery 方式，查询css('font-family') 只会给你指定的列表。如果你声明font-family: Ariel, Helvetia, sansserif（这个声明是故意破坏的，虽然形式上是有效的），它会给你字符串Ariel, Helvetia, sansserif，即使这些字体实际上都没有用于元素。所以这种方法对于最常见的用例（你想使用一个字体列表，覆盖不同的系统，并希望根据实际使用的字体来改变字体大小）是无用的。

在 javascript 中，有一些棘手的方法可以尝试找出元素实际使用的字体。它们通常基于评估某些文本的宽度并将结果与​​某些字体中该文本的宽度进行比较。

最后，有一种合乎逻辑的使用font-size-adjust 的方法，虽然支持不佳。只有 Firefox 支持它，并且部分支持被严重破坏（它使用了错误的 x 高度信息；例如，x-height of Verdana 实际上是 0.545。

【讨论】：

这根本不是anwser。此外，jquery 是这里最合乎逻辑的选择。如果由于某种原因不支持该字体，并且真正的字体是 helvetica，这将影响一小部分浏览器。您似乎对 css 很陌生，但有些浏览器甚至不支持 css 或图像。没有办法让任何东西 100% 兼容。对于大多数浏览器来说，最好的解决这个问题的最好方法是 jquery check set css。

@user1721135 事实上，这很好地回答了这个问题。如果有疑问，请假设您自己的理解存在缺陷，而不是他人的理解。你的断言“你似乎是 CSS 的新手”是彻头彻尾的可笑。 你知道font-size-adjust吗？我不这么认为。 Jukka 做到了，这正是 OP 所追求的（但它不起作用）。

是的，我知道 font-size-adjust 并且它没有用，因为它不受许多浏览器的支持。提到一个无用的理论解决方案是让我质疑你的专业知识和真实经验的原因。 OP 听起来像是他必须做一份工作并遵守规范，听起来不像他在做一个只有 4 个有趣的学校项目。

【参考方案2】：

是的，您可以使用 jquery 轻松实现：

http://jsbin.com/acuzah/1/edit

if ($("div").css('font-family') === 'Arial')

  $("div").css('color': '#00FF00');

使用 css() 读取属性 font-family，例如检查其是否为 Arial，然后设置所需的任何 css 属性。或者添加一个类。

http://api.jquery.com/css/

http://api.jquery.com/addClass/

【讨论】：

它仅在font-family 属性按字面意思设置为值Arial 时才有效。如果这足够了，您也可以（实际上，更好）根据需要在您设置font-family: Arial 的那些元素上直接设置font-size。

【参考方案3】：

if ($("div").css('font-family') === 'Arial')

  $("div").css('font-size': '100px');