Question

我试图通过@font-face加载一个custon字体，通过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>

这两个文件加上Lobster-Regular.ttf驻留在同一目录中。但是当我访问此页面时，龙虾字体无法加载。我正在向我的本地服务器请求页面，而不是简单地通过Firefox加载HTML文件。我检查了网络监视器，甚至没有加载字体文件。有什么想法吗？

Answer 1

这可能是浏览器问题。在处理类似问题时，我发现这种语法很有用：

oVal

Answer 2

这有用吗？

@font-face { 
   font-family: 'Lobster'; 
   src: local('Lobster'), 
        local('Lobster-Regular'), 
        url('Lobster-Regular.ttf'); 
}

根据要求，将其贴出来作为答案。

Answer 3

使用格式指示器通常是一个好主意（尽管大多数浏览器通常能够检测到网络mime类型的字体，如果你将其关闭），但是ttf is not one of the format strings;那应该是truetype：

@font-face {
  font-family: Lobster;
  font-style: normal;
  font-weight: 400;
  src: url(Lobster-Regular.ttf) format("truetype");
}

请注意，字体系列不需要引用，除非名称包含空格，短划线等特殊字符，并且URL不需要引用，但可能需要escaping，具体取决于其中的内容。格式始终需要引号。用于CSS语法的Hurray。

@ font-face似乎不在localhost上工作

3 个答案: