尝试使用嵌入式字体 css 不起作用答案

【问题标题】：Trying to use embedded font css not working尝试使用嵌入式字体 css 不起作用
【发布时间】：2020-05-28 14:00:31
【问题描述】：

我已下载字体并将其添加到 Atom 文本编辑器，但它似乎不起作用...

<style type="text/css">
  @font-face {
    font-family: "avocado";
    src: url("AvocadoCreamy.ttf");
    src: url("AvocadoCreamy.otf");
  }

  h1 {
    color: hsl(93, 100%, 51%);
    text-align: center;
    font-family: "avocado";
  }
</style>

【问题讨论】：

字体文件和css文件在同一个文件夹吗？您是否尝试过设置 font-weight: normal; 。此字体文件是否包含所有字体粗细，还是只是一种字体变体？

标签： html css

【解决方案1】：

在您的情况下，在使用 @font-face 标记时，提供的 URL 的地址可能是错误的或不完整的。如果字体文件是本地下载的，请尝试完整地址。

字体文件如果与CSS文件在同一目录下，可以直接写入URL。

另外，我建议使用@import 标签在 CSS 中导入字体。

@import url('/*YOUR URL TO FONT HERE*/');

【讨论】：

【解决方案2】：

假设您已将字体文件复制到您的根文件夹（通常是您的 index.html 文件所在的位置）。而不是 '.ttf' 或 '.otf'，'.woff' 或 '.woff2' 最适合网络字体，因此如果可用，请考虑使用它。还要确保使用的名称 i 'src' 与根文件夹中的文件名完全相同。见https://css-tricks.com/snippets/css/using-font-face/ 还有How to include a font .ttf using CSS?

@font-face {
font-family: "avocado";
src: url("AvocadoCreamy.ttf") format("truetype");
font-style: normal;
font-weight: 400;

}

【讨论】：