我无法将 .ttf 或 .otf 字体文件合并到我的 html 页面中

Question

这是我的 HTML 文件，带有 h1、p 和 span 标签：-

<!DOCTYPE html>
<html>
<head>
    <title>Custom Fonts</title>
</head>
<body>
<h1>This is Archi - <span>Welcome!</span></h1>
<p class="myFontStyling">dfrzgtiujhgfdsfghyjgku</p>
</body>
</html>

这是我的 CSS 文件，它包含 .ttf 文件以设置标签中元素或内容的字体样式：-

@font-face {
  font-family: 'myFirstFont';
  src: 
        url('fonts/CoHeadlineCorpFont/Co-Headline-Corp-Light.ttf');
        format('truetype');
  font-style: normal;
  font-weight: 100;
}

.myFontStyling {
  font-family: 'myFirstFont';
}

h1 {
    font-family: 'myFirstFont', sans-serif;
    font-weight: 100;
}

这是我的目录结构：-

fontsByArchi
 -fonts
  -CoHeadlineCorpFont
   -Co-Headline-Corp-Light.ttf
 -index.html
 -style.css

我的文本无法获得字体效果，可能是什么原因？

Answer 1

我相信您忘记在 html 页面中引用外部 css 文件。在 <head> 内添加 <link rel="stylesheet" type="text/css" href="style.css"> 标签后，我在上面看到它被应用了。

<!DOCTYPE html>
<html>
<head>
 <link rel="stylesheet" type="text/css" href="style.css">
    <title>Custom Fonts</title>
</head>
<body>
<h1>This is Archi - <span>Welcome!</span></h1>
<p class="myFontStyling">dfrzgtiujhgfdsfghyjgku</p>
</body>
</html>

我无法将 .ttf 或 .otf 字体文件合并到我的 html 页面中

I'm unable to incorporate .ttf or .otf font files into my html page

font-face