Question

我在为不支持font-stretch属性的浏览器（webkit等）定义CSS规则时遇到问题...

问题：我正在使用Helvetica Neue字体（来自Twitter Bootstrap的CSS设置）并且我在我的一些CSS规则上使用font-stretch:condensed;属性。不幸的是，我很快就发现Webkit和其他一些浏览器不支持这个属性，我开始寻找一个回退规则。

为webkit浏览器找到here的一个解决方案是使用帖子脚本字体名称font-family: "HelveticaNeue-CondensedBold","Helvetica Neue",Helvetica,Arial,sans-serif;。但它实际上只是Mac解决方案。 Windows浏览器不具有此字体，并且将回退到非拉伸字体。

因此，使用精简字体的唯一真正解决方案是从myfonts.com，google webfonts等网站导入字体...因为我正在寻找一个免费的解决方案，我找到了一些接近Helvetica Neue的免费字体大胆凝聚。我现在想知道有没有办法指定CSS规则只针对不支持font-stretch属性的浏览器？

Answer 1

我能想到的唯一方法是javascript功能检测：

if (document.createElement("detect").style.fontStretch === "") {  
    document.getElementsByTagName("html")[0].className += " fontstretch";  
}

在<head>标记中添加此内容。

这会在您的fontstretch代码中添加html课程，以便您可以：

将@ font-face规则设置为标准 - 它将成为不支持font-stretch的浏览器的后备
使用.fontstretch作为css挂钩将font-family设置回Helvetica Neue并同时应用font-stretch。

Answer 2

当我搜索其他允许您在css文件中使用.ie9 .yourclass .chrome .yourclass等指定浏览器特定css的内容时，我遇到了一个有意义的解决方案。它使用一个小的javascript文件，可以加载到_layout文件或masterpage文件中。

该链接为Here

一种为不支持特定CSS属性的浏览器指定CSS规则的方法

2 个答案: