Css 不同字体的不同字体重量

我在我的网站上使用了

Bold

、

Medium

和

Normal

字体权重，分别是

700

、

500

和

400

我使用

Helvetica Neue

字体，作为未安装该字体的系统的备用方案，我希望使用

Open SAN

。问题是

opensans

没有

Medium

样式

如果浏览器使用

Open Sans

，我希望以前定义为

font-weight:500

的元素具有

font-weight:600

。有可能吗

堆栈溢出也有一个类似的问题：但我无法使用公认答案中描述的技术获得所需的结果

我需要像这样的东西

@font-face {
  font-family: 'semibold';
  src: 'Helvetica Neue':500, 'Open Sans':600;      
}

---

但不知道该怎么做。

您不能在字体声明中真正定义权重。相反，

font-weight

在那里使用，而不是将样式传递给元素

这似乎有些过分，但您可以以此为起点来查看字体是否可用，然后根据最适合您特定需求的逻辑有条件地修改字体的重量

对于仅使用这两种字体的简化示例，您可以如下设置CSS：

@font-face {
  font-family: h-semibold;
  src: local('Helvetica Neue');
}

@font-face {
  font-family: os-semibold;
  src: local('Open Sans');
}

.semibold {
  font-family: h-semibold, os-semibold;
}

.w5 {
  font-weight: 500;
}

.w6 {
  font-weight: 600;
}

然后，使用上面链接的函数，在JS中放入类似的内容，根据字体支持有条件地加载权重类：

var semibold = document.querySelectorAll('.semibold');

if (isFontAvailable('h-semibold')) {
    semibold.forEach(result => {
      result.className += ' ' + 'w5';
    });
} else {
    semibold.forEach(result => {
      result.className += ' ' + 'w6';
    });
}

---

如果你真的需要执行它，你无疑会找到一个更优雅的解决方案。

但是没有JS代码有什么办法可以做到吗？我认为它在SPA中不会很好地工作，在SPA中，页面的某些部分可以动态添加，但仍然有不正确的css类。