logo标签列表

如何在您的服务器上自行托管谷歌的材料设计图标字体，并在您的网站中使用它们？

cssfontsmaterial-designwebfontsicon-fonts
4
在这个指南中，他们指导我们下载Material Design Icon Fonts，格式如ttf、eot、woff、woff2等，并将其托管在服务器上的某个位置，然后使用CSS，例如： 
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
       url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
       url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}
问题在于，在Material Design Icons Collection页面中，当我选择一个图标时，会出现一个底部菜单，显示标有SVG、PNGS和<> ICON FONT的按钮，当我点击最后一个按钮时，会出现一些指令，建议从网络加载图标字体（这需要访问互联网，并且我需要我的网页能够在本地主机上工作，即使没有互联网连接）。如下所示的屏幕截图。
问题是，我如何以eot、ttf、woff和woff2等格式下载Material Design图标字体，以便我可以自行托管它们并在没有互联网连接的情况下使用它们，就像上面描述的那样。 enter image description here
你的HTML源代码在哪里？因为很可能问题出在你的标记上，而不是字体本身。虽然现在已经是2016年了，你绝对不应该再使用像这样庞大的源代码堆栈了。 - Mike 'Pomax' Kamermans
@Mike'Pomax'Kamermans 什么？我的问题是，我该如何下载那些以 woff、woff2、eot 和 ttf 格式存在的字体文件？这与我的 HTML 标记有什么关系？ - Solace
1
只需要下载它们？在谷歌上搜索“Material Icons Font”，找到https://material.io/icons/，然后仅需阅读文本，它强烈暗示您要点击转至github项目页面。从那里进行下载非常简单。如果这还不够，它也是标准的Google Webfonts条目，可以在https://fonts.googleapis.com/icon?family=Material+Icons找到，因此您甚至可以直接前往该网站，在页面上查看所提供的CSS，并直接下载。 - Mike 'Pomax' Kamermans
@Mike'Pomax'Kamermans 非常感谢你。=) - Solace
1
可能是 如何离线托管 Material Icons？ 的重复内容。 - bhv
2个回答
1

当前指南版本（截至2023年4月）暗示您可以从Github存储库下载字体。但实际上，该存储库仅具备字体的TTF版本，其他格式（EOT、WOFF、WOFF2）都缺失。

在https://github.com/marella/material-icons有一个分支，始终提供最新的TTF、WOFF和WOFF2字体（只缺少EOT，但这是一个小众需求，仅适用于Internet Explorer 6-8）。

您可以从存储库中获取字体（请注意，文件名与Google文档中的不同），并将其放置到您的服务器上。这就是我所做的（更改文件名以匹配Google文档中的文件名），它按预期工作。

或者，该存储库还为各种其他方法提供了设置说明。

1
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接