我添加了字体，但它们不起作用 (css) @font_face

Question

 .writing {
      display: block;
      margin-top: auto;
      margin-bottom: auto;
      text-shadow: 5px 5px red, 10px 10px green, 15px 15px yellow;
      font-family: Niconne;
      text-align: center;
      font-size: 150;
    }
    @font-face {
      font-family: "Niconne";
      src: url("../fonts/Niconne-Regular.ttf") format("truetype");
      /* src: url("../fonts/Niconne-Regular.woff") format("woff");
      src: url("../fonts/niconne-v10-latin-regular.woff2") format("woff2");
      src: url("../fonts/niconne-v10-latin-regular.eot") format("EOT"); */
    }

这些是我的代码。它现在工作正常但是当我推出其他来源时它又回到第一点（它不起作用）。我想在本地使用它（不要给我字体链接）

Answer 1

将font-family: Niconne;更改为font-family: "Niconne";

.writing {
      display: block;
      margin-top: auto;
      margin-bottom: auto;
      text-shadow: 5px 5px red, 10px 10px green, 15px 15px yellow;
      font-family: "Niconne"; /* **Change Here** */
      text-align: center;
      font-size: 150;
    }

Answer 2

你必须给你的 font-family 添加引号，所以它会像这样 font-family: "Niconne"

更新答案：

@font-face {
   font-family: "Niconne";
   src: url("../fonts/Niconne-Regular.ttf") format("truetype");
   src: url("../fonts/Niconne-Regular.ttf") format("truetype"),
        url("../fonts/Niconne-Regular.woff") format("woff"),
        url("../fonts/niconne-v10-latin-regular.woff2") format("woff2"),
        url("../fonts/niconne-v10-latin-regular.eot") format("EOT");
}

我添加了字体，但它们不起作用 (css) @font_face

I add font but they doesn't work (css) @font_face

html

css

google-chrome

font-face