Question

当我在chrome或firefox中打开devtools时，找到我的.page-header__hero-motivation，然后看到渲染字体是Comic Sans，而不是Caveat。

@font-face {
  font-family: "Caveat";
  src: url("../fonts/Caveat-Regular.woff2") format(woff2),
    url("../fonts/Caveat-Regular.woff") format(woff);
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.page-header__hero-motivation {
  font-family: "Caveat", "Comic Sans MS", cursive;
  font-size: 18px;
  color: #8E80A9;
}

My website tree

index.html
css -> style.css
fonts -> Caveat-Regular.woff2 & Caveat-Regular.woff

从googlefonts中获取此字体，然后在线将其转换为woff＆woff2。

chrome devtools

Answer 1

看来，Comic Sans是通用家族而不是字体家族。请勿同时设置两者，只需设置字体或通用系列，另请参见https://developer.mozilla.org/en-US/docs/Web/CSS/font-family 告诉我是否可行，否则请发布整个代码。

Answer 2

天哪，我为此杀了大约5个小时...

我忘记了@ font-face格式的引号

错误

'click [data-download-file]' (event, instance) {
        Spinner.open();
        cordova.plugins.fileDownloader.download(
            "https://myfile.com/file.txt",
            (success) => {
                Spinner.close();
            },
            (error) => {
                console.log(error);
                Spinner.close();
            }
        );
    }

右

format(woff2)

浏览器呈现安全字体而不是本地

2 个答案: