我如何修正不同字体的“后退”重量？

Question

我有个小问题，但非常烦人。

我应该有一个字体家庭为我的h1，在以下退路: BreeSerif，疟疾，无衬线。

• BreeSerif应该是400磅。
• 阿里尔应该是700岁。
• 无衬线应该是400磅。

现在我试过几件事，但似乎都没有用。

第一次尝试：将 BreeSerif呈现为"normal"，使Arial变为粗体，但似乎不可能将sans-serif呈现为“普通”，因为我已经将h1声明为700。

第二次尝试:既然将是正常的，我可以简单地将"sans-serif“应用于@字体面，并将其放在字体大小: 700中，但不起作用。

/* FIRST TRY */

@font-face {
    font-family: 'BreeSerif';
    src: url('fonts/BreeSerif-Regular.otf');
    font-weight: 700;'

h1 {
    font-family:
        BreeSerif,
        bold-arial,
        sans-serif;

   }

/* SECOND TRY */

@font-face {
    font-family: 'BreeSerif';
    src: url('fonts/BreeSerif-Regular.otf');
    font-weight: 700;

@font-face {
    font-family: 'sans-normal';
    src: local('sans-serif');
    font-weight: 700;

h1 {
    font-family:
        BreeSerif,
        arial,
        sans-serif;
    font-weight: 700;

/* THIRD TRY */

@font-face {
    font-family: 'BreeSerif';
    src: url('fonts/BreeSerif-Regular.otf');
    font-weight: 400;

@font-face {
    font-family: 'arialBold';
    src: local('arial');
    font-weight: 700;

h1 {
    font-family:
        BreeSerif,
        arialBold,
        sans-serif;
    font-weight: 400;


@font-face {
    font-family: 'BreeSerif';
    src: url('fonts/BreeSerif-Regular.otf');
    font-weight: 700;
}
@font-face {
    font-family: 'TradeWinds';
    src: url('fonts/TradeWinds-Regular.ttf');
    font-weight: 400;
}

}
@font-face {
    font-family: 'sansnormal';
    src: local('sans-serif');
    font-weight: 700;


}

body {
    width: auto;
    background: #eee;

    font-family: arial, sans-serif;
}

p {
    font-family: helvetica;
    font-size: 14px;
    color: #222;
}

/* LÖS DENNA SEN! */
h1 {
    font-family:
    BreeSeri,
    arial,
    sansnormal;
    font-weight: 700;
}

#ContentWrapper {
    background: white;
    width: 960px;
    margin: auto;
}

预期结果:正常、大胆、正常

实际结果:正常、大胆、粗体

Answer 1

通过使用大小来定义尺寸-调整用于回退字体，根据：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字体。但是使用大小调整，我们可以调整回退字体的大小。属性ascent-override的实现速度与大小调整相同.

获取调整设置

但现在你想知道，我在哪里得到这些调整的大小。这个漂亮的小页面为您计算它们，并为您提供自定义回退字体的完整CSS：

https://deploy-preview-15--upbeat-shirley-608546.netlify.app/perfect-ish-font-fallback/?font=Montserrat