1

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

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

在这里为 webkit 浏览器找到的一种解决方案是使用 post script font name font-family: "HelveticaNeue-CondensedBold","Helvetica Neue",Helvetica,Arial,sans-serif;。但它实际上只是 Mac 解决方案。Windows 浏览器将没有此字体，并将回退到非拉伸字体。

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

4

2 回答 2

1

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

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

将此添加到您的<head>标签中。

这将为您的标签添加一个fontstretch类，以便您可以：html

  1. 将 @font-face 规则设置为标准 - 这将是不支持的浏览器的后备方案font-stretch

  2. 用作.fontstretchcss 挂钩以将字体系列设置回Helvetica Neue并应用font-stretch。

于 2012-05-29T09:32:39.663 回答
0

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

该链接在这里

于 2013-09-14T20:38:29.133 回答