CSS @ font-face無效？
[英]CSS @font-face not working?
問題描述
在我的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')但是沒有也工作過。
有人可以解釋一下如何將我的自定義字體正確插入網頁嗎？
PS：我的網頁目前不在任何服務器上我只是在Chrome 47.0上從我的電腦上打開html文件，這可能是原因嗎？
2 個解決方案
解決方案1
3 已采納 2016-01-03 15:07:35
最佳實踐是始終使用相對路徑而不是絕對路徑，以確保它適用於任何域。
從您的代碼中，我假設您具有以下結構：
- 根
- 的index.html
- add_ons
- style_sheets
- style.css文件
- 來源
- 字體
- Pier.woff2
- Pier.woff
- Pier.ttf
- 字體
- style_sheets
您只需更新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');
}
解決方案2
0 2016-01-03 14:11:12
我找到了答案！
當你說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無效
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.