谷歌字体图标大小类 - TypeScript

谷歌字体图标是一套可缩放的图标，可用于网页设计和开发，由谷歌开发。在TypeScript中使用谷歌字体图标时，有一些必须了解的大小类。

大小类

谷歌字体图标有五个大小类，分别是：

• .material-icons: 24px
• .material-icons-outlined: 24px
• .material-icons-round: 24px
• .material-icons-sharp: 24px
• .material-icons-two-tone: 24px

这些类可用于HTML标记中的元素，如下所示：

<i class="material-icons">face</i>
<i class="material-icons-outlined">face</i>
<i class="material-icons-round">face</i>
<i class="material-icons-sharp">face</i>
<i class="material-icons-two-tone">face</i>

效果图：

使用方法

在TypeScript中使用谷歌字体图标，需要将该字体包引入项目中，并在HTML中引用。

这里以Angular为例，将谷歌字体图标包引入项目：

npm install material-design-icons

然后在.angular-cli文件中添加以下代码：

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

最后在HTML中引用该字体包：

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

总结

TypeScript中使用谷歌字体图标，需要了解这五个大小类，并正确引入该字体包，才能正常使用。