@ font-face似乎不能在localhost上工作 [英] @font-face don't seem to work on localhost
问题描述
我尝试通过 @ font-face 加载托管字体，通过localhost提供字体文件。
style.css：
@ font-face {
font-family ： '龙虾';
font-style：normal;
font-weight：400;
src：url（Lobster-Regular.ttf）format（'ttf'）;
}
body {
font-family：Lobster;
font-size：28px;
}
index.html： b
$ b
<！DOCTYPE hmtl>
< html>
< head>
< meta charset =utf8/>
< title> @ font-face test< / title>
< link rel =stylesheethref =style.css/>
< head>
< body>
< p>我的字体在哪里？！< / p>
< body>
< / html>
这两个文件加上Lobster-Regular.ttf驻留在同一目录。但是当我访问这个页面，龙虾字体不加载。我请求页面到我的本地服务器，而不是简单地通过Firefox加载HTML文件。我检查网络监视器，并且字体文件甚至没有加载。任何想法？
使用格式指示器通常是一个好主意（虽然大多数浏览器通常都能够检测字体网络mime类型，如果你离开它），但 ttf 不是格式字符串之一;应该 truetype ：
@ font-face {
font-family：龙虾;
font-style：normal;
font-weight：400;
src：url（Lobster-Regular.ttf）format（truetype）;
}
请注意，字体系列不需要引号，除非名称有特殊字符（如空格，破折号等），并且该网址不需要引用，但可能需要转义，取决于它的内容。 格式总是需要引号。 Hurray for CSS语法。
I'm trying to load a custon font via @font-face, serving the font file over localhost.
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>
These two files plus the Lobster-Regular.ttf reside on the same directory. But when I access this page, the Lobster font don't load. I am requesting the page to my local server, and not simply loading the HTML file over Firefox. I checked the network monitor, and the font file did not even got loaded. Any ideas?
Using a format indicator is usually a good idea (although most browsers will generally be able to detect the font from the network mime-type if you leave it off), but ttf is not one of the format strings; that should be truetype:
@font-face {
font-family: Lobster;
font-style: normal;
font-weight: 400;
src: url(Lobster-Regular.ttf) format("truetype");
}
Note that the font family doesn't need quoting, unless the name has special characters like spaces, dashes etc, and the URL doesn't need quoting, but might need escaping depending on what's in it. The format does always need quotes. Hurray for CSS syntax.
这篇关于@ font-face似乎不能在localhost上工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
