我一直在尝试导入一个自定义字体到我的HTML。我已经从FontSquirrel下载了字体包。
当我在我的页面上用开发工具检查我的字体时，它说有三种字体被导入了，TTF、WOFF和WOFF2，但当我点击它们时，它们只显示常规的字体样式。
这是我的CSS，我已经添加了src URL（但是没有src链接，它也不能工作）。我已经下载了工具包，将其解压缩到我的about-me地图中，并删除了zip文件。
@font-face {
font-family: 'moon_flower_boldregular';
src: url('C:\Users\M de Witte\Desktop\html\aboutme\webfontkit')
src: url('moon_flower_bold-webfont.eot');
src: url('moon_flower_bold-webfont.eot?#iefix') format('embedded-opentype'),
url('moon_flower_bold-webfont.woff2') format('woff2'),
url('moon_flower_bold-webfont.woff') format('woff'),
url('moon_flower_bold-webfont.ttf') format('truetype'),
url('moon_flower_bold-webfont.svg#moon_flower_boldregular')
format('svg');
font-weight: normal;
font-style: normal;
}
p {
font-family: moon_flower_boldregular;
font-size: 30px;
}
我希望有人能说出我做错了什么。
多谢了。
检查您的url源斜线是相反的
您的代码：
src:url('c:\users\m de witte\desktop\html\aboutme\webfontkit')
必须是：
src:url（“c：/users/m de witte/desktop/html/aboutme/webfontkit”）
也要避免源代码中的一些空格/m de witte/删除空格
我想这就解决了你的问题。
使用相对路径。例如。如果您的css文件位于css文件夹中，字体位于fonts文件夹中，则路径为:url('../fonts/moon_flower_bold-webfont.eot')。
注意，您必须为所有字体文件定义此路径，而不是仅为first定义此路径。注意分号：
@font-face {
font-family: 'moon_flower_boldregular';
src: url('../fonts/moon_flower_bold-webfont.eot');
src: url('../fonts/moon_flower_bold-webfont.eot');
src: url('../fonts/moon_flower_bold-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/moon_flower_bold-webfont.woff2') format('woff2'),
url('../fonts/moon_flower_bold-webfont.woff') format('woff'),
url('../fonts/moon_flower_bold-webfont.ttf') format('truetype'),
url('../fonts/moon_flower_bold-webfont.svg#moon_flower_boldregular') format('svg');
font-weight: normal;
font-style: normal;
}
由于某种原因，我的路径没有正确地连接起来。
我在f12再次检查了developer tools，并检查了我的字体，突然看到3个错误，显示字体找不到。我把它们放入我之前的子地图（关于我），它起作用了。
谢谢大家的回复，这个网站太棒了。
