css 如何修复不同字体的“回退”粗细？

cqoc49vn 于 2022-12-05 发布在其他

关注(0)|答案(1)|浏览(177)

我有一个小问题，但非常烦人。
我应该为我的h1设置一个font-family，在下面的回退中：粗衬线体、Arial、无衬线体。

BreeSerif的权重应为400。
Arial字体的权重应为700。
无衬线体的粗细应为400。

现在我已经尝试了几种方法，但似乎都不起作用。

**第一次尝试：**这会将我的BreeSerif呈现为“normal”，将Arial呈现为粗体，但似乎不可能将无衬线呈现为“normal”，因为我已经将h1声明为700。
**第二次尝试：**现在既然BreeSerif应该是正常的，我可以简单地将“sans-serif”应用于@font-face并将其置于font-weight中：700，但它不工作。

第一个
预期结果：正常，粗体，正常
实际结果：正常，粗体，粗体

css

来源：https://stackoverflow.com/questions/54607227/how-do-i-fix-fallback-weight-for-different-fonts

1条答案

按热度按时间

wecizke31#

使用size-adjust为备用字体定义尺寸逐渐成为主流，原因如下：https://caniuse.com/mdn-css_at-rules_font-face_size-adjust

按今天使用的浏览器查看当前实施百分比

"这是什么意思"
您可以使用下列CSS定义：

@font-face {
  font-family: 'Lato';
  src: url('/static/fonts/Lato.woff2') format('woff2');
  font-weight: 400;
}

@font-face {
    font-family: "Lato-fallback";
    size-adjust: 97.38%;
    ascent-override: 99%;
    src: local("Arial");
}

h1 {
    font-family: Lato, Lato-fallback, sans-serif;
}

正如你所看到的，我们定义了一个web字体的后备版本（在我们的例子中是Lato），这个后备版本只是一个对“Arial”的引用，它是一个安全的web字体。但是通过size-adjust，我们可以调整后备字体的大小。属性ascent-override的实现率与size-adjust相同。

获取调整设置

但是现在你想知道，我从哪里得到这些调整大小。这个漂亮的小页面为你计算它们，并为你提供自定义后备字体的完整CSS：
https://deploy-preview-15--upbeat-shirley-608546.netlify.app/perfect-ish-font-fallback/?font=Montserrat

赞(0）回复(0）举报 2022-12-05

我来回答

css 如何修复不同字体的“回退”粗细？

1条答案

相关问题

热门标签

最新问答