这个问题以前被问过几次,但我从未见过我现在所处的这种情况。
我正在使用codeigniter
框架结合bootstrap
作为前端框架制作一个网站。因此,我的项目树大致如下所示
MyProject/
├── application/
├── system/
└── assets/
└── bootstrap
├── css/
│ └── bootstrap.min.css
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2
bootstrap.min.css
包含使用字体的这些字体,如下所示:
@font-face {
font-family: 'Glyphicons Halflings';
src: url('/assets/bootstrap/fonts/glyphicons-halflings-regular.eot');
src: url('/assets/bootstrap/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
url('/assets/bootstrap/fonts/glyphicons-halflings-regular.woff2') format('woff2'),
url('/assets/bootstrap/fonts/glyphicons-halflings-regular.woff') format('woff'),
url('/assets/bootstrap/fonts/glyphicons-halflings-regular.ttf') format('truetype'),
url('/assets/bootstrap/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
出于某种原因,css
似乎跳过了整个部分,因为这些字体不仅不起作用,而且它们也没有显示在 chrome 的developer tools
部分网络下。它甚至没有显示错误,它甚至不在那里。
我该如何解决这个问题?
编辑 1我注意到src
的url
不正确,但这只是一个小错误,因为这与错误未显示在 chromedeveloper tools
中
的事实无关编辑 2经过大量尝试,我注意到它在非常基本的 html 中也不起作用,如下所示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello</title>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<p><span class="glyphicons glyphicons-search"></span> Hello</p>
</body>
</html>
然后我开始研究更多这种奇怪的行为,并偶然发现了这个链接,其中指出在 v4.0 中,字形从引导中删除。这就是为什么我认为字形一起从引导中删除的原因。
如果你认为我错了,看到我犯的错误,请回复。
这可能是一个小错误,但不应该是: glyphicon glyphicon-search
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello</title>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<p><span class="glyphicon glyphicon-search"></span> Hello</p>
</body>
</html>
请注意,您在 glyphicon 之后添加了额外的"s"...这不是glyphicons,而是glyphicon...
如何在HTML中包含字体?您需要将元素放在要引导的元素或用于包含这些字体的任何 CSS之前。
您可以在 Mozilla 的 Web 字体使用指南中阅读更多内容。在标题"使用在线字体服务"(特别是#5)下查看。当您自己包含文件时,请以正确的顺序正确包含文件的原则。
编辑:回顾一下之后,我想我已经看到了这个问题。查看 src url,看起来引导 CSS 期望fonts
文件夹位于assets
目录中,而不是引导目录中。因此,您需要将fonts
文件夹移动到assets
目录,或者更改引导程序中的 src url 以包含assets/bootstrap/fonts/
。