Fatal编程技术网
  • javascript/
  • Javascript 如何脱机托管材质图标？

Javascript 如何脱机托管材质图标？

javascript html cordova

Javascript 如何脱机托管材质图标？,javascript,html,cordova,materialize,Javascript,Html,Cordova,Materialize,如果这是一个非常简单的问题，我深表歉意，但是你如何使用谷歌材质图标而不使用 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> ? 我希望我的应用程序能够显示图标，即使用户没有互联网连接方法2。自托管 github的最新版本（资产：zip文件），解压并将包含材质设计图标文件的字体文件夹复制到本地项目中-- 您只需要使用存档中的文件夹：它包含不同格式的图标字

如果这是一个非常简单的问题，我深表歉意，但是你如何使用谷歌材质图标而不使用

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
?

我希望我的应用程序能够显示图标，即使用户没有互联网连接

方法2。自托管

github的最新版本（资产：zip文件），解压并将包含材质设计图标文件的字体文件夹复制到本地项目中--

您只需要使用存档中的文件夹：它包含不同格式的图标字体（用于多浏览器支持）和样板css

  • 将
    @font-face
    的url属性中的源文件替换为本地项目中iconfont文件夹（字体文件所在位置）的相对路径，例如
    url（“iconfont/MaterialIcons Regular.ttf”）
面
NPM/Bower套餐

谷歌官方提供了一个Bower和NPM依赖选项——遵循材料图标指南

使用bower：
bower安装材质设计图标--保存

使用NPM：
NPM安装材料设计图标-保存

材质图标：或者从@marella's查看材质设计图标字体和CSS框架，以自托管图标

注意

谷歌似乎将该项目置于低维护模式。最后 在撰写本文时，发布时间是3年前

关于这一点，GitHub上有几个问题，但我想 请参阅@cyberalien对该问题的评论，其中提到了几个社区项目 分叉并继续维护材质图标

在我的回答中，我已经尝试编译了自我托管图标需要做的所有事情。 您需要遵循以下4个简单步骤

  • 打开materialize存储库的iconfont文件夹

    链接-

  • 下载这三个图标文件->

    MaterialIcons Regular.woff2-格式（“woff2”）

    MaterialIcons Regular.woff-格式（'woff'））

    MaterialIcons Regular.ttf-格式（“truetype”）

    注意-下载后，您可以将其重命名为任何您喜欢的名称

  • 现在，转到您的CSS并添加此代码

    • @font-face{
字体系列：“材质图标”；
字体风格：普通；
字体大小：400；
src:url（MaterialIcons Regular.eot）；/*用于IE6-8*/
src:local（“材质图标”），
本地（‘定期’），
url（MaterialIcons Regular.woff2）格式（“woff2”），
url（MaterialIcons Regular.woff）格式（“woff”），
url（MaterialIcons Regular.ttf）格式（“truetype”）；
}
.材质图标{
字体系列：“材质图标”；
字体大小：正常；
字体风格：普通；
字体大小：24px；/*首选图标大小*/
显示：内联块；
线高：1；
文本转换：无；
字母间距：正常；
换字：正常；
空白：nowrap；
方向：ltr；
/*支持所有WebKit浏览器*/
-webkit字体平滑：抗锯齿；
/*支持Safari和Chrome*/
文本呈现：优化易读性；
/*对Firefox的支持*/
-moz osx字体平滑：灰度；
/*支持IE*/
字体功能设置：“liga”；
}
    在页面中包含的样式标题信息上，您可以转到实际的超链接并制作本地化副本以脱机使用图标

    注意：您将下载两个文件，分别为icon.css和somefile.woff

  • 根据标题中的要求转到以下URL

    • 将页面另存为任意_filename.css。默认值是icon.css

  • 找一条像这样的线
    • src:local（'MaterialIcons'）、local（'MaterialIcons-Regular'）、url(https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2)

  • 访问具有.woff结尾的URL
    • https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2
    。您的浏览器将自动下载它。将其保存在CSS文件夹中

  • 现在应该有两个文件icon.css和2fcrYFNa…mY.wof22，将它们都保存在css中。现在在css标题位置对目录中的icon.css进行编辑。只需确保.woff2文件始终与icon.css位于同一文件夹中。请随意编辑长文件名

    • 上面的方法对我不起作用。 我从github下载了这些文件，但浏览器没有加载字体

    我所做的是打开材质图标源链接：

    我看到了这个标记：

        /* fallback */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v22/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;
  -moz-font-feature-settings: 'liga';
  -moz-osx-font-smoothing: grayscale;
}
    我打开woff字体url链接

    并下载woff2文件

    然后我用material-icons.css中的新路径替换woff2文件路径

    @font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       /* Old file: url(iconfont/MaterialIcons-Regular.woff2) format('woff2'), */
       /* load new file */ 
       url(2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2'),
       url(iconfont/MaterialIcons-Regular.ttf) format('truetype');
}
    这让我觉得很好用。

    如果您使用webpack项目，在

    npm install material-design-icons --save
    你只需要

    import materialIcons from 'material-design-icons/iconfont/material-icons.css'
    这可能是一个简单的解决方案

    这是谷歌发布的一个分支

    使用bower或npm安装

    bower install material-design-icons-iconfont --save

npm install material-design-icons-iconfont --save
    在HTML页面上导入css文件

    <style>
  @import url('node_modules/material-design-icons-iconfont/dist/material-design-icons.css');
</style>
    问题标题询问如何脱机托管材质图标，但正文澄清了目标是脱机使用材质图标（重点是我的）

    使用您自己的材质图标文件副本是一种有效的方法/实现。另一个，对于那些可以使用a的人来说，是让服务人员来处理它。这样，您就不用麻烦地获取副本并保持最新

    例如，使用运行workbox cli并接受默认值的最简单方法生成service worker，然后将以下文本附加到生成的service worker：

    workboxSW.router.registerRoute('https://fonts.googleapis.com/(.*)',
workboxSW.strategies.cacheFirst({
  cacheName: 'googleapis',
  cacheExpiration: {
    maxEntries: 20
  },
  cacheableResponse: {statuses: [0, 200]}
})
);
    你可以 
    <style>
  @import url('node_modules/material-design-icons-iconfont/dist/material-design-icons.css');
</style>

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

    <i class="material-icons">face</i>

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

    workboxSW.router.registerRoute('https://fonts.googleapis.com/(.*)',
workboxSW.strategies.cacheFirst({
  cacheName: 'googleapis',
  cacheExpiration: {
    maxEntries: 20
  },
  cacheableResponse: {statuses: [0, 200]}
})
);

    npm install material-design-icons --save

    @import '~material-design-icons/iconfont/material-icons.css';

    npm install material-design-icons

    @import "~/node_modules/material-design-icons/iconfont/material-icons.css";

    <i className='material-icons' style={{fontSize: '36px'}}>close</i>

    npm install material-design-icons-iconfont --save

    $material-design-icons-font-path: '~material-design-icons-iconfont/dist/fonts/';
@import '~material-design-icons-iconfont/src/material-design-icons';

    <i class="material-icons">contact_support</i>

    npm install angular-material-icons --save

    npm install material-design-icons-iconfont --save

     "styles": [
          "node_modules/material-design-icons/iconfont/material-icons.css",
          "src/styles.scss"
        ],

    "styles": [
              "node_modules/material-design-icons-iconfont/dist/material-design-icons.css",
              "src/styles.scss"
            ],

    <i class="material-icons-outlined">hourglass_empty</i>

    <i class="material-icons">phone</i>

    npm install material-design-icons

    @import '~material-design-icons/iconfont/material-icons.css';

    npm install material-design-icons --save

    @import "../node_modules/material-design-icons-iconfont/dist/material-design-icons.css";

    <system.webServer>
    <staticContent>
      <remove fileExtension=".woff" /> 
      <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
      <remove fileExtension=".woff2" /> 
      <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
    </staticContent>

    // Using icon tag
<i class="material-icons">face</i>
<i class="material-icons md-48">face</i>
<i class="material-icons md-light md-inactive">face</i>

// Using Angular Material's <mat-icon> tag
<mat-icon>face</mat-icon>
<mat-icon>add_circle</mat-icon>
<mat-icon>add_circle_outline</mat-icon>

    import '@mdi/font/css/materialdesignicons.css'