在学习 CSS 时，我编写了以下代码来使用我放置在本地硬盘上的 Google 字体。 如果 html 文件保存在 font 文件夹中，则该文件有效，但在其他文件夹中不起作用。请注意 我没有通过任何服务器工作。将文件保存到另一个文件夹后，我双击它。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Fonts</title>
<style>
@font-face {
font-family: 'Abel-regular';
src: url('file://G:/JavaPrgsJGD/fonts/Google-fonts/Abel/Abel-regular.ttf');
font-weight: normal;
font-style: normal;
}
</style>
<style type="text/css">
.ngs-h3 {font-family: 'Abel-regular'; font-size: 30px; color: green;}
.ngs-p {font-family: 'Abel-regular'; font-size: 20px; color: blue;}
</style>
<script>
</script>
</head>
<body>
<h3 class="ngs-h3">Technical assessment of a movie</h3>
<p class="ngs-p">
Many people see the movies and immediately after completion of the show, when asked by news channels,
they simply brush aside the movie saying, "It's a bogus movie" without realizing that what goes in for
bringing a movie to a cinema theatre for viewers, but of course, they have spent money and time to
watch a movie, they at least deserve a free opinion.
</p>
<p class="ngs-p">
However, this forum is not about personal likes and dislikes of down-to-earth movie-goer. This forum
is for students who are pursuing their technical studies in film industry. Therefore, let us concentrate
on technical aspects of a movie.
</p>
</body>
</html>
我做错了吗？请指导我并阐明在有和没有服务器的情况下使用本地文件的情况。 谢谢。 吴谢赫。
最佳答案
我个人强烈反对在使用 CSS 等前端网络技术时使用绝对文件路径。您可以将字体放在 ./font 文件夹中并使用绝对路径，或者使用
@font-face {
font-family: 'Abel-regular';
src: url('./fonts/Abel-regular.ttf');
font-weight: normal;
font-style: normal;
}
// or
@import url('https://fonts.googleapis.com/css?family=Abel');
关于css - 本地驱动器上的自定义字体不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43867648/