如果我只使用 Boostrap 的在线 CDN 源文件，为什么所有字体（即 glyphicon 图标）都能正确加载？

Question

如果我将所有内容复制并粘贴到 Microsoft Visual Studio 代码中，则以下 Plunker 代码 (https://embed.plnkr.co/KpVqaiblOKGk5K6VWmi4/) 可以完美运行。一旦我离线使用 Bootstrap 源文件（即，将我的 link 的 href 设置为文件位置而不是在线 URL），将弹出以下错误消息并且 none 出现的图标：

CSS3119: @font-face 规则没有可用的字体 bootstrap.css (266,5) output without bootstrap icons

这是我的源文件目录的图像，我希望我的输出看起来像我的 HTML 代码（JA 代码直接从 Plunker link 复制和粘贴）： source file directory listing correct output with bootstrap icons

    <head>
    <link rel="stylesheet" href="library/bootstrap.css" />
        <!--    THIS CODE LOADS GLYPHICONS ICONS PROPERLY <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />  -->
    <link rel="stylesheet" href="library/angular-dropdownMultiselect.min.css" />
    <link rel="stylesheet" href="style.css" />
    
    <script src="library/angular.min.js"></script>
    <script src="library/angular-dropdownMultiselect.min.js"></script>
    <script src="script.js"></script>
    </head>

  <body>
    <div ng-app="App">
      <div ng-controller="MyController">
        <div style="margin-top: 25px;">
          <dropdown-multiselect dropdown-config="config" model="selectedItems"></dropdown-multiselect>
        </div>
        <br>
        <pre> Selected Items = {{selectedItems | json}} </pre>
      </div>
    </div>
  </body>

Answer 1

您需要从官方下载 link 正确下载 Bootstrap。此官方下载包含一个 /fonts/ 目录，其中包含实际的 glyphicon 字体文件。您的 css 文件示例：

@font-face{
    font-family:'Glyphicons Halflings';
    src:url(../fonts/glyphicons-halflings-regular.eot);
}

如果我只使用 Boostrap 的在线 CDN 源文件，为什么所有字体（即 glyphicon 图标）都能正确加载？

Why are all font-faces (i.e., glyphicon icons) loaded properly if I ONLY use Boostrap's online CDN source file?

css

cdn

font-face

glyphicons

bootstrap-4