【问题标题】:Font-stretch property not working on IE11字体拉伸属性不适用于 IE11
【发布时间】:2022-01-16 02:47:54
【问题描述】:

.bord {
  border: 1px solid black;
  font-stretch: extra-condensed;
}
<div class="bord">
  Hello, there is an error in your code. Also the content does not condense as desired
</div>

bord 类包含 font-stretch css 属性,但似乎不适用于 IE11

【问题讨论】:

  • 无论它是否在 IE11 中有效,您可能只想避免它,因为它在 Chrome 中无效,这是互联网的一个相当大的部分:caniuse.com/#search=font-stretch

标签: html css internet-explorer-11


【解决方案1】:

根据this,原因如下:

为了使用font-stretch 并查看某种结果,字体 被使用的脸必须与给定的值相匹配。其他 话,font-stretch 不适用于任何字体,而只能用于字体 设计有与定义的尺寸相匹配的不同面。

所以这不是 IE11 问题。

这是一个带有您的代码的 sn-p(未设置字体):

.bord {
  border: 1px solid black;
  font-stretch: extra-condensed;
}
<div class="bord">
  Hello, there is an error in your code. Also the content does not condense as desired
</div>

这是一个带有字体集的 sn-p(可以拉伸/压缩):

div {
  border: 1px solid black;
  font-family: arial;
}
.bord {
  font-stretch: extra-condensed;
}
<div class="bord">
  Hello, there is an error in your code. Also the content does not condense as desired
</div>
<hr />
<div>
  Hello, there is an error in your code. Also the content does not condense as desired
</div>

注意:

  • 记住这是 CSS3 属性,目前还没有在浏览器中广泛使用,只有 IE9+ 和 Firefox 9+。

【讨论】:

  • 所以你的意思是,如果我使用 Font-family: Arial 然后使用 font-stretch:condensed... 那么它可以在 IE11 中工作?我不这么认为,它会工作。因为,即使在我的示例中我没有使用任何字体系列..但实际上,我在 IE11 上使用的代码确实有字体系列:arial 和 font-stretch:extra-condesnsed。它仍然无法在 IE11 上运行
  • 那你能出示你的“真实”代码吗?你在 IE11 中运行了我的两个 sn-ps 吗?
猜你喜欢
  • 2018-06-09
  • 2019-02-28
  • 2015-08-08
  • 2021-06-07
  • 2016-07-16
  • 2015-02-13
  • 2013-04-03
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多