@字体-face似乎不适用于localhost
@字体-face似乎不适用于localhost
提问于 2015-12-03 19:49:28
我试图通过@font-face加载custon字体，在本地主机上提供字体文件。
style.css:
@font-face {
font-family: 'Lobster';
font-style: normal;
font-weight: 400;
src: url(Lobster-Regular.ttf) format('ttf');
}
body {
font-family: "Lobster";
font-size: 28px;
}index.html:
<!DOCTYPE hmtl>
<html>
<head>
<meta charset="utf8"/>
<title>@font-face test</title>
<link rel="stylesheet" href="style.css"/>
<head>
<body>
<p>Where is my font?!</p>
<body>
</html>这两个文件加上Lobster-Regular.ttf位于同一个目录中。但是当我访问这个页面时，龙虾字体不会加载。我将页面请求到本地服务器，而不是简单地通过Firefox加载HTML文件。我检查了网络监视器，字体文件甚至没有加载。有什么想法吗？
回答 3
Stack Overflow用户
回答已采纳
发布于 2015-12-04 16:30:47
今天..。
...the回答是"使用woff2，带woff回退。不要使用ttf或otf或eot或svg“。自2012年以来，网络字体已经相当成熟，甚至在最初的答案发布一年之后，由于广泛采用Web字体规范和支持删除死气沉沉的格式，情况也变得非常不同。
但早在2015年，最初的答案是：
使用格式指示器通常是个好主意(虽然大多数浏览器通常都能够从网络mime类型中检测字体，如果您不使用它)，但是ttf 不是格式字符串之一。；应该是truetype。
@font-face {
font-family: Lobster;
font-style: normal;
font-weight: 400;
src: url(Lobster-Regular.ttf) format("truetype");
}请注意，字体系列不需要引用，除非名称具有特殊字符，如空格、破折号等，并且URL不需要引用，但可能需要逃逸，这取决于其中的内容。格式总是需要引号。CSS语法的Hurray。
Stack Overflow用户
发布于 2015-12-03 19:57:03
可能是浏览器的问题。在处理类似问题时，我发现这种语法很有用：
@font-face {
font-family: 'Comfortaa Regular';
src: url('Comfortaa.eot');
src: local('Comfortaa Regular'),
local('Comfortaa'),
url('Comfortaa.ttf') format('truetype'),
url('Comfortaa.svg#font') format('svg');
} Stack Overflow用户
发布于 2015-12-04 12:29:40
这行得通吗？
@font-face {
font-family: 'Lobster';
src: local('Lobster'),
local('Lobster-Regular'),
url('Lobster-Regular.ttf');
}按照要求，张贴它作为答案。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/34074892
复制相关文章
相似问题
腾讯云开发者
