我已经在这个问题上坚持了一个小时了。显然我不知道我在做什么......
下面的嵌入有什么问题？检查网络选项卡，fonts.css 正在加载，但网络选项卡甚至不尝试下载任何网络字体。
我做错了什么？
浏览器:Google Chrome(最新版本)
字体.css
@font-face {
font-family: 'PTSans';
font-style: normal;
font-weight: 400;
src: url(../fonts/PT_Sans-Web-Regular.ttf) format('truetype'),
url(../fonts/PT_Sans-Web-Regular.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'PTSans';
font-style: normal;
font-weight: 700;
src: url(../fonts/PT_Sans-Web-Bold.ttf) format('truetype'),
url(../fonts/PT_Sans-Web-Bold.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
main.css
html, body {
font-family: 'PTSans', serif;
...etc
}
index.html
<html>
<head>
<title>Title</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=10">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
<link href="css/fonts.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
...etc
编辑:是的...我确实检查了预期文本是否具有正确的字体系列集。请参阅此处的证明:
(它使用衬线渲染 - 所以是的，我绝对确定 CSS 指向是正确的)
这是文件夹结构...(浏览器甚至不会尝试下载所引用的文件...所以如果文件不存在也没关系...我至少应该是在网络面板中查看事件...)
如有任何帮助，请提前致谢。
最佳答案
根据您的图像，我可以看到您将该文件夹命名为font，但 url() src的属性有字体:
src: url(../fonts/PT_Sans-Web-Regular.ttf) format('truetype'),
url(../fonts/PT_Sans-Web-Regular.woff2) format('woff2');
关于html - 嵌入字体未渲染或下载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48217531/