如何离线托管 Material Design 图标？

Question

如何离线托管 Material Design 图标？

Shy*_*Shy 4 javascript css materialize material-design google-fonts

我想为我的离线 Web 开发项目离线托管 Material Icons（我部署的计算机上没有互联网）。从我的谷歌搜索中，我找到了这个答案。但这对我不起作用。我的问题是如何让它发挥作用。如何为我的离线项目离线托管材料设计图标？

基本上我从这里下载了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>

Run Code Online (Sandbox Code Playgroud)

这是 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';
}

Run Code Online (Sandbox Code Playgroud)

Answer 1

Vla*_*ski 5

添加图标的第一种方法如下：

将此文件的内容复制到您的自定义 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;
}

Run Code Online (Sandbox Code Playgroud)

从 src url 复制链接并将其放入浏览器中。它将下载文件。您需要将其文件放在保存第一个文件（material-fonts.css）的同一目录中。
将material-fonts.css 文件更新src: url()为src: url(2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2');

第二个示例： 看起来您下载了错误的文件。您需要下载该目录并将其放入您的文件夹中，以前的文件必须删除。

你的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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	8 年，1 月前
查看次数：	9773 次
最近记录：	5 年，8 月前