Question

我有一个很小但是很烦人的问题。

在下面的回退中，我应该为我的h1拥有一个字体家族：BreeSerif，arial和sans-serif。

BreeSerif的体重应为400。
Arial应该是weigth 700。
Sans-serif应该重400。

现在我已经尝试了几种方法，但是似乎都没有用。

第一次尝试： 这使我的BreeSerif变为“正常”，使Arial变为粗体，但是自从我将h1声明为700以来，似乎无法将sans-serif变为“正常”。

第二次尝试： 现在，由于BreeSerif应该是正常的，所以我可以简单地将“ sans-serif”应用于@ font-face并将其设置为font-weight：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;
}

预期结果：正常，粗体，正常

实际结果：正常，粗体，粗体

如何解决不同字体的“后备”粗细？

0 个答案: