我是Web开发的新手,所以如果这是一个愚蠢的错误,我深表歉意,但是我似乎无法获得嵌入到我的CSS样式表Fonarto中的字体出现在我的网页上。我正在使用Brackets创建网站,并通过实时预览主动查看它,所以我想知道这是否对创建此问题有帮助。鉴于我没有CSS经验,因此我使用fontsquirrel.com
自动生成代码,该代码将使用@font-face
添加字体。这就是它生成的内容,并进行了一些调整(字体存储在resources/fonts/fonarto/regular
中)
@font-face {
font-family: 'fonarto_regular';
src: url('resources/fonts/fonarto/regular/fonarto-webfont.eot');
src: url('resources/fonts/fonarto/regular/fonarto-webfont.eot?#iefix') format('embedded-opentype'),
url('resources/fonts/fonarto/regular/fonarto-webfont.woff2') format('woff2'),
url('resources/fonts/fonarto/regular/fonarto-webfont.woff') format('woff'),
url('resources/fonts/fonarto/regular/fonarto-webfont.ttf') format('truetype'),
url('resources/fonts/fonarto/regular/fonarto-webfont.svg#fonartoregular') format('svg');
font-weight: normal;
font-style: normal;
}
为了增加样式,我正在做预期的事情,尽管我没有提供任何后备功能(我应该这样做,如果可以,怎么做?)。
body {
font-family: 'fonarto_regular';
}
我的索引页面的代码如下:
<!DOCTYPE html>
<html>
<style rel="stylesheet" type="text/css" href="stylesheet.css"></style>
<script>
</script>
<head>
</head>
<body>
<div id='index-head'>
<h1>Site Name Here</h1>
</div>
</body>
</html>
到目前为止,从字面上看就是这样。而且,正如我提到的那样,我没有添加任何后备或做任何复杂的事情,标题文本
Site Name Here
在实时预览中显示在衬线Times New Roman中。我究竟做错了什么?
请注意,我已经看过Stack Overflow上的all of these帖子,但是没有任何帮助。也没有w3schools。另外请记住,实时预览运行的是Chrome实例。
最佳答案
您可以检查几件事。
首先,查看检查器,查看是否正确链接到字体。
另外,您还应该通过以下方式链接到css文件:
<link rel="stylesheet" href="stylesheet.css">
您还已在head标签之外链接到文件。
<html>
<head>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
</body>
</html>