我想为我的离线 Web 开发元素离线托管 Material Icons(我不会在部署的计算机上连接互联网)。从我的谷歌搜索中，我找到了 this SO answer .但它对我不起作用。我的问题是如何让它发挥作用。如何为我的离线元素离线托管 Material Design 图标？
我附上了a .zip file of my SSCCE project, which reproduces the problem, here .
基本上我下载了 MaterialIcons-Regular.eot、MaterialIcons-Regular.ttf、MaterialIcons-Regular.woff 和 MaterialIcons -Regular.woff2 从这里并将它们放在我的元素目录中。
这是我的索引文件:
<!DOCTYPE html>
<html>
<head>
<title>MaterializeTest</title>
<link rel="stylesheet" href="material-fonts.css" />
<link type="text/css" rel="stylesheet" href="materialize.min.css" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width; initial-scale=1"/>
<script src="jquery.min.js"></script>
<script src="materialize.min.js"></script>
</head>
<body>
<a href="#!"><i class="material-icons">chevron_left</i></a>
</body>
</html>
这是 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;
font-size: 24px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* 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';
}
最佳答案
第一种添加图标的方法如下:
- 将此文件的内容复制到您的自定义 css 文件(例如，material-fonts.css)https://fonts.googleapis.com/icon?family=Material+Icons
/* fallback */
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/materialicons/v29/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}- 从 src url 复制链接并将其放入浏览器。它将下载文件。您需要将其文件放在保存第一个文件 (material-fonts.css) 的同一目录中。
- 在 material-fonts.css 文件
src: url()中更新为src: url(2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2');
第二个例子: 看起来你下载了错误的文件。 你需要下载这个 directory并将其放入您的文件夹中，必须删除以前的文件。
您的 materialFontTest.php 应该如下所示:
<!DOCTYPE html>
<html>
<head>
<title>MaterializeTest</title>
<link rel="stylesheet" href="material-icons.css" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<script src="jquery.min.js"></script>
<script src="materialize.min.js"></script>
</head>
<body>
<a href="#!"><i class="material-icons">chevron_left</i></a>
</body>
</html>关于javascript - 如何离线托管 Material Design 图标？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46539290/