gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 18:44:29 25 4
gpt4 key购买 nike

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

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

找到一个解决方案 here对于 webkit 浏览器是使用 post script 字体名称 font-family: "HelveticaNeue-CondensedBold","Helvetica Neue",Helvetica,Arial,sans-serif;。但它实际上只是 Mac 解决方案。 Windows 浏览器将没有这种字体,将回退到非拉伸(stretch)字体。

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

最佳答案

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

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

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

这将添加一个 fontstretch给你上课 html标记这样你就可以:

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

  2. 使用 .fontstretch作为 css 钩子(Hook)将字体系列设置回 Helvetica Neue并申请 font-stretch

关于css - 一种为不支持特定 CSS 属性的浏览器指定 CSS 规则的方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10796273/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com