【发布时间】：2015-08-28 11:32:27
【问题描述】：
我确信这一定是一个常见问题，但我刚刚花了一个小时试图弄清楚如何制定一个引用本地计算机上字体文件的 @font-face 规则。我从各种网站复制了示例，包括堆栈溢出，但没有任何效果。
我只是想从一个 ECM 开始——三个文件，都在一个目录中：
test.html:
<html>
<head>
<title>Document Title</title>
<link rel="stylesheet" type="text/css" href="./test.css" />
</head>
<body>
<p>Some text.</p>
</body>
</html>
test.css：
@font-face {
font-family: DreamOrphans;
src: url(dreamorp.ttf) format ("truetype");
}
body {
background: black;
color: #80c0c0;
font-family: DreamOrphans, "sans-serif", generic;
}
dreamorp.ttf（字体文件）
当我在 Firefox (40.something) 中打开 test.html 时，它会恢复为默认的无衬线字体。
如果我将字体源更改为 local("Dream Orphans"); 那么它使用安装在 ~/.fonts 下的字体文件——所以我知道问题只是 src: url(...) 无法在本地找到字体文件硬盘。
我试过了：
url(dreamorp.ttf)
url("dreamorp.ttf'")
url("./dreamorp.ttf'")
url("/home/dlm/.fonts/dreamorp.ttf")
url("/home/dlm/Documents/web/fonts/dreamorp.ttf")
没有任何效果。
Can relative paths be used for @font-face src? 表明路径周围的单引号是不行的。我试过双引号，没有引号，没有运气。
根据@font-face does not work while fonts in subfolder，我已将字体文件复制到与 css 文件相同的目录中。没有运气。
如果url() 不是通过相对路径访问本地字体文件的正确方法，那是什么？我可以在本地测试我的网站，而不涉及网络服务器，也不必sed 我所有的字体？
【问题讨论】：
-
您能在此处添加更多信息吗？相对于您的 HTML 文件，
ttf文件在哪里？您是从文件 (file:///) 还是作为服务内容 (http://) 加载此内容？ -
所有 3 个文件都在同一个目录中 -- 目录上的 ls 打印“dreamorp.ttf test.css test.html”。因此，绝对绝对字体文件与 css 位于同一位置。在 Firefox 中，我通过 file:// 加载它
-
从 file:/// 加载的资源有各种疯狂的安全限制，否则它是超级不安全的。运行一个本地主机服务器并将您的文件加载为 http://，然后看看对您有什么好处（python：
python -m SimpleHTTPServer，节点：npm installl -g http-server，然后是http-server，php：php -S localhost:8000，以及其他一百万运行方法之一） -
好的，谢谢，这就解释了。