Material Design 的图标制作原理

最新推荐文章于 2024-06-11 09:43:33 发布

weixin_34228617

最新推荐文章于 2024-06-11 09:43:33 发布

阅读量316

点赞数

文章标签：前端 ViewUI

原文链接：https://juejin.im/post/5a82de616fb9a06340521194

版权

思考过程

看到效果之后发现果然很神奇，直接是利用了英文单词就把对应的字体给搞定了。这样不仅直观而且很方便。很好奇其中的原理。就先查了一下material Design实现原理，Material Design 的图标是怎么生效的?,明白了他是利用字符连字的特性。然后在把相应字符在制作字体的时候映射成对应的显示字体。我就想了解一下字体是怎么制作的，那这里就涉及到要制作字体。就是画，感觉是给设计师看的，那应该要和前端更近一些的query，我想到了iconfont是如何制作的这个query，找到了解密 Iconfont,在制作iconfont的过程中就是把字符对应成你要显示的图标的过程。不过一般的字体选用unicode字符里面的造字区域。unicode字符集里面，E000 至 F8FF属于用户造字区。原本是空的，用户可以在字体文件里面随便定义这些字符的形状。我们所见的webfont icon，一般就选在这一部分。

操作步骤

选用FontCreator软件进行制作字体,这个软件只有windows版的（哭），找了一下，推荐使用这个birdfont，下下来用一下。不好下载，存在云盘里面了birdfont(待续)
新建一个字体
选择一个字符，就是你要映射的字符
找个图标
导入刚在的字体中
把原先的图删掉
看网页

实践

在使用过程中发现不用设置字体为连字就可以生效，看这个例子,直接运行字符也能生效

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <style type="text/css">
       /* @font-face {
            font-family: 'Material Icons';
            font-style: normal;
            font-weight: 400;
            src: url(./test.ttf) format('truetype');
        }*/

        .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';
        }
    </style>
</head>
<body>
参考文章： http://www.shejidaren.com/material-icons.html
<i class="material-icons">face</i>
</body>
</html>
复制代码

一些问题

兼容性问题

参考链接

weixin_34228617

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Material Design 的图标制作原理

思考过程看到效果之后发现果然很神奇，直接是利用了英文单词就把对应的字体给搞定了。这样不仅直观而且很方便。很好奇其中的原理。就先查了一下material Design实现原理，Material Design 的图标是怎么生效的?,明白了他是利用字符连字的特性。然后在把相应字符在制作字体的时候映射成对应的显示字体。我就想了解一下字体是怎么制作的，那这里就涉及到要制作字体。就是画，感觉是给设计师看的，...
复制链接

扫一扫