导入 material 设计图标是否应该与我当前的代码脱机工作？

Question

我目前正在为自动停车系统设计 UI。它需要能够离线工作，因为我们不知道代客是否有互联网连接。我还需要使用 Material 设计图标。我已经运行测试了我的 html 代码，看看 Material 设计图标是否可以离线工作，但是，有时页面加载正常，有时 Google Chrome 会崩溃。我将非常感谢您了解正在发生的事情以及如何确保我的页面使用所需的 material 设计图标离线加载。

<!DOCTYPE html>
  <html>
    <head>
      <!--Import materialize.css-->
      <link type="text/css" rel="stylesheet" href="css/materialize.css"  media="screen,projection"/>
      <!--Import the css I designed for this UI specifically-->
      <link type="text/css" rel="stylesheet" href="css/menu.css"/>
      <!--Import Material Design icons-->
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <!--Import jQuery before materialize.js-->
      <script src="jquery-1.11.3.min.js"></script>
      <script type="text/javascript" src="js/materialize.min.js"></script>
      <!--Import jQuery Keypad CSS-->
      <link type="text/css" href="css/jquery.keypad.aps.css" rel="stylesheet">
      <script type="text/javascript" src="js/jquery.plugin.js"></script>
      <script type="text/javascript" src="js/jquery.keypad.js"></script>

      <!--Touchscreen keypad for ticket num input just in case ticket scanner doesn't work or they want to edit the ticket number (e.g.ticket scanner makes mistake)-->
      <script>
        $(document).ready(function(){
          $('#inmenuKeypad').keypad({target: $('#ticket_num'),layout: ['789'+ $.keypad.CLEAR,'456' + $.keypad.BACK,'1230-']
          });
        });
      </script>
    </head>

    <body>
      <!--Page Title Panel-->
      <div class="card-panel">
        <h4>INPARK</h4>
        <!--Options button, reveals dropdown menu with options to switch to other pages-->
        <a id="optionsbtn" class='dropdown-button btn' href='#' data-activates='dropdown1' data-constrainwidth='false'>Options</a>
      </div>
      <!--Dropdown menu structure and it's items-->
      <ul id="dropdown1" class="dropdown-content">
        <li><a href="dashmenu.html">Dashboard</a></li>
        <li class="divider"></li>
        <li><a href="outmenu.html">Outpark</a></li>
        <li class="divider"></li>
        <li><a href="qmenu.html">Outpark Queue Menu</a></li>
        <li class="divider"></li>
        <li><a href="shufflemenu.html">Shuffle</a></li>
        <li class="divider"></li>
      </ul>
      <!--The form where valet inputs the customer's ticket number for Inpark-->
      <div class="row">
        <form class="col s12" action="ineem.html"><!--Change to the action to send data to some kind of data handler page/script-->
          <div class="row">
            <div class="input-field col s5 offset-s3">
              <input placeholder="Enter ticket number" id="ticket_num" type="text" class="validate">
            </div>
            <button class="btn waves-effect waves-light" class="col s9" type="submit">OK</button>
          </div>
        </form>
      </div>
      <!--Dashboard button, press to return to dashboard(FAB)-->
      <div class="fixed-action-btn" style="bottom: 45px; right: 24px;">
        <a class="btn-floating btn-large waves-effect waves-light" href="dashmenu.html">
          <i class="material-icons" style="font-size: 48px">home</i>
        </a>
      </div>
      <!--Touchscreen Keypad-->
      <div id="inmenuKeypad"></div>

    </body>
  </html>

Answer 1

你上面的代码里面还有一个link到https://fonts.googleapis.com/icon?family=Material+Icons。

我的 HTML header 中唯一的 link 图标是：

<link href="fonts/google-material/material.css" rel="stylesheet" />

material.css 文件具有以下定义：

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url(MaterialIcons-Regular.woff2) format('woff2'),
       url(MaterialIcons-Regular.woff) format('woff'),
       url(MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  width: 1em;
 /* height: 1em;
  line-height: 1;*/
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

在HTML中我使用了&#x[code];定义和图标像魅力一样在所有浏览器中离线显示：

<i class="material-icons">&#xE14F;</i>

我从以下位置获得了图书馆：Material icons guide

Answer 2

请参阅 Material Icons Guide 部分 'Getting Icons'。我像这样使用 npm（或凉亭）：

npm install material-design-icons --save

然后只获取包中包含的 material-icons.css 文件：

<link href="node_modules/material-design-icons/iconfont/material-icons.css"
  rel="stylesheet">

当然，无论您提供什么服务，您都需要更改路径。

导入 material 设计图标是否应该与我当前的代码脱机工作？

Should importing material design icons work offline with my current code?

html

javascript

css

materialize