引导:缓慢加载象形符号

Bootstrap: slow loading with the glyphicons

本文关键字：符号 加载 缓慢 引导      更新时间：2023-09-26

我给了一个尝试Bootstrap，但我有点惊讶的一件事是，似乎glyphicon真的有点慢加载或显示

我有一种感觉，即使是旋转木马也会更快出现。然而，在其他网站上似乎没有那么慢。

因此，我想我一定是做错了什么，但我没有看到很多差异与用于显示在线象形符号的代码，有什么办法来解决它?

但是到目前为止，因为我试图在本地运行所有东西，它应该像光一样快，不是吗?象形文字需要两秒钟的时间，而其余的则立即显示。

是否有更好的方法来测量显示在屏幕上的速度(而不仅仅是使用我的最终用户感觉)，请告诉我。

刚开始做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>

我找到了问题所在，底线在bootstrap.min.css.

原因是前一段时间我使用了一个在线引导自定义器，因为当时我还没有安装任何CSS预处理器。这足以改变几个颜色。

然而，我不知道定制器添加了几个关于在哪里获得某些字体的链接，我宁愿避免，因为我在中国，有些网站访问速度很慢。

。

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