javascript 导入 Material Design 图标是否应该与我当前的代码脱机工作？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32014204/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Should importing material design icons work offline with my current code?
提问by The Mediocre Gatsby
I'm currently designing a UI for an automated parking system. It needs to be able to work offline, as we don't know if the valet will have internet connectivity. I also need to use Material Design icons. I've ran tests of my html code to see if Material Design icons would work offline, however, on occasions the page would load fine, on other occasions Google Chrome would crash. I would be very grateful for insight on what is happening and how to ensure my page loads offline with the required material design icons.
我目前正在为自动停车系统设计 UI。它需要能够离线工作，因为我们不知道代客是否有互联网连接。我还需要使用 Material Design 图标。我已经对我的 html 代码进行了测试，以查看 Material Design 图标是否可以脱机工作，但是，有时页面可以正常加载，有时谷歌浏览器会崩溃。我将非常感谢您了解正在发生的事情以及如何确保我的页面使用所需的材料设计图标离线加载。
<!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>
回答by Bjoerg
You still have a link to https://fonts.googleapis.com/icon?family=Material+Iconsinside the above code.
您仍然可以在上述代码中找到https://fonts.googleapis.com/icon?family=Material+Icons的链接。
The only link for the icons in the HTML header I have is:
我拥有的 HTML 标题中图标的唯一链接是：
<link href="fonts/google-material/material.css" rel="stylesheet" />
The material.css file has the following definition:
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';
}
In HTML I use the &#x[code]; definition and the icons are displayed offline in all browsers like a charm:
在 HTML 中，我使用 &#x[code]; 定义和图标在所有浏览器中离线显示，就像一个魅力：
<i class="material-icons"></i>
I got the library from: Material icons guide
我的库来自：材料图标指南
回答by ervi
See the Material Icons Guidesection 'Getting Icons'. I use npm (or bower) like:
请参阅材质图标指南部分“获取图标”。我使用 npm（或凉亭），例如：
npm install material-design-icons --save
and then just source the material-icons.css file included in the package:
然后只需获取包中包含的 material-icons.css 文件：
<link href="node_modules/material-design-icons/iconfont/material-icons.css"
rel="stylesheet">
Of course you need to change the path with whatever you serve.
当然，无论您提供什么服务，您都需要更改路径。
