Question

在我的HTML中：

{{#each objs}}
    <li>{{this.ASIN}}: {{this.itemTitle}}</li>
{{/each}}

<!DOCTYPE html>

在css我尝试过：

<head>

    <link type="text/css" rel="stylesheet" href="add_ons/style_sheets/style.css" />

</head>

<body>

    <div id="header">
        <p id ="text" >BALL</p>
    </div>

<body>

它没有用，我也试图删除@font-face { font-family: 'Pier'; src: url('add_ons/sources/fonts/Pier.woff2') format('woff2'); src: url('add_ons/sources/fonts/Pier.woff') format('woff'); src: url('add_ons/sources/fonts/Pier.ttf') format('truetype'); } #text{ font-family: 'Pier'; }部分并使用format('truetype')，但这也没有用。

有人可以解释一下如何将我的自定义字体正确插入网页吗？

P.S。：我的网页目前不在任何服务器上我只是在chrome 47.0上从我的电脑上打开html文件，这可能是原因吗？

Answer 1

最佳做法是始终使用相对路径而不是绝对路径，以确保它适用于任何域。

从您的代码中，我假设您具有以下结构：

根
- 的index.html
- 的 add_ons
  
  的 style_sheets
  
  的style.css
  
  的来源
  
  的字体
  
  Pier.woff2
  
  Pier.woff
  
  Pier.ttf

您只需在以下位置更新CSS中的路径：

@font-face { font-family: 'Pier'; src: url('add_ons/sources/fonts/Pier.woff2') format('woff2'); src: url('add_ons/sources/fonts/Pier.woff') format('woff'); src: url('add_ons/sources/fonts/Pier.ttf') format('truetype'); }

要：

@font-face { font-family: 'Pier'; src: url('../sources/fonts/Pier.woff2') format('woff2'); src: url('../sources/fonts/Pier.woff') format('woff'); src: url('../sources/fonts/Pier.ttf') format('truetype'); }

Answer 2

我找到了答案！

当你说url（）css需要一个完整的url而不是一个相对的url时。

所以：我使用的路径相对于我的index.html而不是完整的完整路径，所以src: url('website/add_ons/sources/fonts/regular/Pier.woff2');

您应该使用src: url('C:/Users/Admin/Desktop/website/add_ons/sources/fonts/regular/Pier.woff2');

如果您使用的是网站，则应使用完整路径，即http://www.web.com/fonts/font.ttf

CSS @ font-face无效？

2 个答案: