我添加了字体，但它们不起作用（css）@font_face答案

【问题标题】：I add font but they doesn't work (css) @font_face我添加了字体，但它们不起作用（css）@font_face
【发布时间】：2022-01-25 11:09:18
【问题描述】：

 .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"); */
    }

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

【问题讨论】：

标签： html css google-chrome font-face

【解决方案1】：

你必须给你的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");
}

【讨论】：

它不工作:(
@Asimorobot 我更新了我的答案，试试这个哈哈:)
效果很好。但有什么区别？ =)
@Asimorobot 不同之处在于我在单个 src 而不是多个 src 中使用多种格式。你的字体是src: url(...) format("truetype"); src: url(...) format("woff");，但我的是src: url(...) format("truetype"), url(...) format("woff");。 :)

【解决方案2】：

将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;
    }

【讨论】：