Bootstrap: 字形加载缓慢

Question

我尝试了 Bootstrap 但我有点惊讶的是，字形图标的加载或显示速度似乎真的很慢。

感觉连轮播都快出现了。但是，在其他网站上似乎并没有那么慢。

因此，我想我一定是做错了什么，但我没有看到与在线显示字形的代码有太大差异，有什么办法可以修复吗？

但到目前为止，由于我正在尝试运行本地的所有内容，它应该像光一样快，不是吗？字形需要两秒钟，而其余部分会立即显示。

有没有更好的方法来衡量某物在屏幕上显示的速度（而不是仅仅使用我最终用户的感觉），请告诉我。

刚开始做web前端开发，请多多包涵

下面是我用来仅显示一个的代码 glyphicon-home:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

        <title>My Page...</title>

        <!-- Bootstrap core CSS -->
        <!-- Latest compiled and minified CSS -->
        <link href="boostrap - 3.3.5/css/bootstrap.min.css" rel="stylesheet">

        <!-- Favicons... -->
        <!-- For IE 9 and below. ICO should be 32x32 pixels in size -->
        <!--[if IE]><link rel="shortcut icon" href="favicon.ico"><![endif]-->

        <!-- Touch Icons - iOS and Android 2.1+ 180x180 pixels in size. --> 
        <link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png" sizes="180x180">

        <!-- Firefox, Chrome, Safari, IE 11+ and Opera. 196x196 pixels in size. -->
        <link rel="icon" href="faviconOthers.ico" sizes="196x196">

        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if IE 9]>
            <script src="html5shiv - 3.7.2/html5shiv.min.js"></script>
            <script src="respond - 1.4.2/respond.min.js"></script>
        <![endif]-->

        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script type="text/javascript" src="jquery - 1.11.3/jquery.min.js" ></script>

        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script type="text/javascript" src="boostrap - 3.3.5/js/bootstrap.min.js" ></script>
    </head>

    <body>
         <i class="glyphicon glyphicon-home"></i>
    </body>

</html>

Answer 1

我发现哪里出了问题，底线在bootstrap.min.css。

原因是前一段时间我使用了在线 bootstrap 定制器，因为当时我还没有安装任何 CSS 预处理器。换几个颜色就够了

但是，我不知道定制器添加了几个关于从哪里可以在线获取某些字体的链接，我宁愿避免使用这些链接，因为我在中国而且有些网站访问速度非常慢。

例如

@font-face{font-family:'Glyphicons Halflings';
src:url(http://bootstrap-live-customizer.com/bootstrap-3.3.5/fonts/glyphicons-halflings-regular.eot);

Bootstrap: 字形加载缓慢

Bootstrap: slow loading with the glyphicons

javascript

css

loading

twitter-bootstrap

glyphicons