Question

我将字体更改为Arial，但将标题字体设置为自定义字体。我将字体放在名为MYFONT的文件夹中，该文件夹位于我的根目录中的名为fonts的文件夹中。（根目录->字体-> MYFONT->字体文件）这是我的代码：

CSS
body {
    font-family: 'Arial', sans-serif;
}

@font-face {
    font-family: 'MYFONT';
    font-style: normal;
    font-weight: 600;
    font-display: optional;
    src: url(fonts/MYFONT/MYFONT.woff2) format('woff2'),
         url(fonts/MYFONT/MYFONT.woff) format('woff'),
         url(fonts/MYFONT/MYFONT.svg) format('svg'),
         url(fonts/MYFONT/MYFONT.eot) format('eot');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


h1, h2, h3 {
    font-family: 'MYFONT', sans-serif;
}

HTML
<h1>MYFONT</h1>
<h2>MYFONT</h2>
<h3>MYFONT</h4>
<p>ARIAL</p>

当我第一次在新设备上打开页面时，或者当我按Cmd + Shift + R（不带浏览器缓存的重新加载页面）时，整个页面都在Arial中。可能是什么问题呢？我希望<h1>, <h2>, and <h3>使用MYFONT字体。

**编辑：我尝试删除

中的“ sans-serif”部分

h1, h2, h3 {
    font-family: 'MYFONT', sans-serif;
}

并且在第一次加载/加载而不缓存时，字体变成了默认的衬线字体。**

Answer 1

如果您以特定的权重指定@font-face规则，则字体只会以该权重插入。。因此，请从您的字体声明中删除font-weigth: 600，或将font-weight: 600添加到您的h1,h2,h3规则中。 @font-face用于为特定的系列/样式/粗细组合加载特定的字体资源，并且字体的声明越具体，常规CSS的字体就必须越具体，才能使font-face规则生效。也是如此。

Answer 2

我终于解决了它，显然是font-display: optional;的问题，我将其更改为font-display: swap;并可以正常工作。

重新加载时（覆盖缓存）将文本从自定义字体恢复为网络安全字体

2 个答案: