【问题标题】:If Font is not supported, reduce font-size如果不支持字体,请减小字体大小
【发布时间】:2014-09-04 17:46:45
【问题描述】:

我有以下 CSS 代码:

.massp_text_box p {
  font-size: 20px;
  font-family: "Eurostile-Bold",Helvetica,Arial,sans-serif;
  color:#dadbdc;
}

由于我只有 .otf 和 .ttf 中的字体,我无法支持 IE。在这种情况下,IE 将 Arial 作为字体。在这种情况下,字体大小不应该是 20px - 它应该是 18px。

如何告诉我的 CSS 代码“如果 Eurostile-Bold 不受支持,请使用 font-size:18px。”

有什么想法吗? 谢谢!

【问题讨论】:

标签: html css fonts


【解决方案1】:

在这种情况下,您可以使用条件 cmets 和/或条件编译来定位 ie,但您也可以通过 http://fontsquirrel.com 创建所需的格式

【讨论】:

【解决方案2】:

我建议您创建一个仅限 IE 的样式表,以便您可以专门为 IE 设置这些值。 Microsoft 已经实施了一种解决方案来完成此任务,称为“条件注释”。它们的工作方式是条件 cmets 仅在用户使用 Internet Explorer 访问您的站点时注册,并且所有其他 Web 浏览器将忽略评论和嵌套在条件评论中的任何代码。

为了在您的情况下使用它们,您需要执行以下操作:

1] 创建一个名为 ie.css 的新样式表,并将其放在与原始 CSS 文件相同的目录中。

2] 将您通常以.massp_text_box p 为目标的相同CSS 代码放入ie.css 文件,但将字体大小更改为18px。我使用了您的示例代码,但您可以随意将这些样式更改为您想要的任何样式,因为 IE 将是唯一使用它们的浏览器:

.massp_text_box p {
  font-size: 18px;
  font-family: "Eurostile-Bold",Helvetica,Arial,sans-serif;
  color:#dadbdc;
}

3]最后,在您的 HTML 代码中,您需要像放置普通样式表一样将条件注释嵌套在 <head> 标记中,并确保更改 @987654328 @ 以便它链接到 ie.css 样式表的正确位置。

<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

*注意:此条件注释针对所有版本的 IE,但如果您愿意,您可以选择仅针对特定的 IE 版本。请参阅额外阅读以了解如何执行此操作,但对于您的即时需求,上面的代码应该就足够了。

额外阅读: http://css-tricks.com/how-to-create-an-ie-only-stylesheet/

【讨论】:

  • (IE 条件 cmets 只支持到 IE9。)
  • @Ulrich Schwarz 难道IE9和IE10都不支持他的OTF/TTF字体吗?只有支持条件 cmets 的版本不支持 OTF/TTF。如果我错了,请纠正我。
  • Caniuse 将 IE10,11 中的 TTF/OTF 支持列为“部分”,没有任何进一步的解释;在 IE9 中,它显然取决于字体中的版权标志。
猜你喜欢
  • 2021-03-27
  • 2015-04-13
  • 2011-12-17
  • 2016-09-18
  • 1970-01-01
  • 1970-01-01
  • 2012-04-25
  • 1970-01-01
  • 2014-11-15
相关资源
最近更新 更多