字体小图标

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

网站或者应用上面会用到一些小图标 .. 比如在我们的设计里,这个导航栏上有个搜索小图标 ..

小图标的格式可以是一般的图像,比如 jpg,或者 png 。这种格式的小图标被放大以后会变得模糊 .. 设备的屏幕的精度越来越高,有这种高清屏幕上,如果你想让小图标清晰,你要使用比显示尺寸更大的图像 ..

比如一个小图标的宽度是 24 像素,如果你想让它在两倍高清的屏幕上显示的清楚,这个小图标的图像尺寸应该是 48px,如果在三倍高清的屏幕上显示清楚,小图标的图像尺寸应该是 72 像素 ..

或者,我们可以使用矢量格式的图像,比如 svg 格式就是矢量图像 .. 这种格式的图像不管放大多少倍都会很清楚 ..

在你的设计里出现的小图标很可能不是你自己设计的,你可能要去一些图标网站去找自己需要的小图标,在下载的时候,应该会让你选择图标的格式,很可能有 png ,或者 svg .. 尽量使用矢量图像,这样你就不用担心图像的尺寸问题,它在任何屏幕上都会显示清楚的显示 ..

还有一种格式的小图标,就是字体图标 .. 这种格式的图标一般会包装一些字体文件,在这个字体文件里包含了一组图标 .. 还会对应一个 css 文件,你可以使用特定的标签还有 css 类,在页面上显示你需要的图标 ..

这种格式的小图标也是矢量的 .. 你可以把它们当成是普通的字体对待,你可以用 css 去设置图标的颜色还有大小 ...

有些网站或者应用可以让你定制这种图标字体,你可以选择几个要设计里需要的小图标 .. 然后它会自动给你生成需要的字体还有 css 样式。

字体小图标《 网页设计案例:导航栏 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点