html - 重新加载时文本从自定义字体恢复为网络安全字体(覆盖缓存)

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-weigth: 600 添加到 h1,h2,h3 规则中. @font-face 用于为特定的系列/样式/粗细组合加载特定的字体资源，字体声明越具体，您的常规 CSS 就必须越具体才能用于字体- 面子规则也适用。