引导字形未加载



这个问题以前被问过几次,但我从未见过我现在所处的这种情况。

我正在使用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我注意到srcurl不正确,但这只是一个小错误,因为这与错误未显示在 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/

最新更新