Question

我确定这一定是一个常见问题，但我花了最后一小时试图找出如何制作引用本地机器上的字体文件的@ 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时，它将恢复为默认的无衬线字体。

如果我将font-face源更改为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?表明路径周围的单引号不合适。我试过双引号而且没有引号，没有运气。

Per @font-face does not work while fonts in subfolder我已将字体文件复制到与css文件相同的目录中。没有运气。

如果url()不是通过相对路径访问本地字体文件的正确方法，那么它是什么？我可以在本地测试我的网站，而不需要Web服务器，也不需要sed我所有的字体？

Answer 1

url（）使用路径系统 relative 来表示CSS的位置。

如果你的CSS在

C:/home/etc/styles.css

然后url（“myfont.ttf”）将指向

C:/home/etc/myfont.ttf

CSS @ font-face src：url不接受本地硬盘驱动器文件

1 个答案: