CSS @font-face不工作吗？
在我的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')，但也没有起作用。
有人能解释一下如何正确地将我的自定义字体插入到网页中吗？
附言:我的网页当前没有在任何服务器上，我只是在chrome 47.0上打开我电脑上的html文件，这可能是原因吗？
回答 2
Stack Overflow用户
发布于 2016-01-03 23:07:36
最佳实践是始终使用相对路径，而不是绝对路径，以确保它适用于任何域。
从您的代码中，我假设您具有以下结构：
- 根
- index.html
- add_ons
- style_sheets
- style.css
- style_sheets
- **sources**
- **fonts**
- 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');
}Stack Overflow用户
发布于 2016-01-03 22: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
https://stackoverflow.com/questions/34576818
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号