CSS @font-face 不工作？

Question

在我的 HTML:

<!DOCTYPE html>

<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>

在 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');
}

#text{

    font-family: 'Pier';

}

它没有用，我也尝试删除 format('truetype') 部分并使用 src: url('Path'), url('Path'), url('Path') 但那也没有用。

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

P.S.: 我的网页当前不在任何服务器上我只是从 chrome 47.0 上的计算机打开 html 文件，这可能是原因吗？

Answer 1

我找到答案了！

当你说 url() css 期望完整的 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

Answer 2

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

根据您的代码，我假设您具有以下结构：

根目录
- 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');
 }

CSS @font-face 不工作？

CSS @font-face not working?

html

css

font-face