Question

<html>
<head>
  <title>innomotion media</title>
  <style type="text/css" media="screen, print">
    @font-face {
      font-family: "Baiti";
      src: url(fonts/baiti.ttf");
    }

    body { font-family: "Baiti", serif }
  </style>
</head>
<body>
  This is Baiti
</body>
</html>

作为一个长期的编码人员，我一直躲避HTML或CSS。但是是时候我需要一个网页了。基本语法对我来说很清楚，但是我已经偶然发现使用自定义字体。

该html文件位于我的驱动器上。它旁边是一个名为“ fonts”的本地文件夹。我以为我已正确引用了该文件夹，并且通过打开网页使用了字体“ Baiti”。

但这不是。它显示了一些清晰度。乘新的罗马之类的东西。

我做错了什么？

<html>
<head>
  <title>innomotion media</title>
  <style type="text/css" media="screen, print">
    @font-face {
      font-family: "Baiti";
      src: url(fonts/baiti.ttf");
    }

    body { font-family: "Baiti", serif }
  </style>
</head>
<body>
  This is Baiti
</body>
</html>

Answer 1

src: url("./fonts/baiti.ttf");

还要确保字体系列在预览字体时与名称匹配。以及使用woff或woff2

时的类型

喜欢

src: url("./fonts/baiti.woff");
src: url("./fonts/baiti.woff2");

为什么我的自定义字体不显示（HTML，CSS，BEGINNER）

1 个答案: