[关闭]
@a06062125 2017-03-01T18:06:02.000000Z 字数 2209 阅读 472

webfont应用

css3



在网页设计中, 设计师会广泛应用图标来做示意, 图标比文字占空间少,也更形象易懂。 我们可以使用位图来展示图标, 也可以用webfont(比如大名鼎鼎的fontawesome)。

用位图大家都会,插个image标签就可以啦。 那webfont怎么用呢?

webfont 简介

@font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中。

@font-face的语法规则请参考w3cplus: CSS3 @font-face

webfont 的优点

webfont可以通过设置font-size, line-height, font-color来实现大小颜色的控制,在缩放时也不会失真。

webfont 的使用场景

所以当我们遇到了这样的设计图时, 就可以考虑是否要使用webfont替代位图了:

在网页开发中使用 webfont

生成步骤请参考下文的 如何制作webfont

以fontawesome为例, 生成的webfont文件如下图:

fontawesome:fonts

https://github.com/FortAwesome/Font-Awesome/tree/master/fonts

  1. // https://github.com/FortAwesome/Font-Awesome/tree/master/css
  2. // 定义字体集
  3. @font-face {
  4. font-family: 'FontAwesome';
  5. src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
  6. src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
  7. font-weight: normal;
  8. font-style: normal;
  9. }
  10. // 定义字体公共类
  11. .fa {
  12. display: inline-block;
  13. font: normal normal normal 14px/1 FontAwesome;
  14. font-size: inherit;
  15. text-rendering: auto;
  16. -webkit-font-smoothing: antialiased;
  17. -moz-osx-font-smoothing: grayscale;
  18. }
  19. // 具体的图标编码
  20. .fa-home:before {
  21. content: "\f015";
  22. }
  1. <i class='fa fa-home'></i>

如何制作webfont

.psd -> webfont 步骤

设计师给出.psd文件后,生成webfont大概分为三个步骤

  1. 将需要生成矢量文件的图标切出来; (建议省略这一步, 直接让设计师给出对应图标的矢量文件)
  2. 将图标生成svg矢量文件(convertio: https://convertio.co/zh/svg-converter/);
  3. 将svg矢量文件转换成webfont ;

webfont生成工具

IconMoon的使用方式很简单,导入.svg矢量文件, 选中文件, 导出字体。
IconMoon:import-svg

IconMoon:export-fonticon

补充

如何你熟悉photoshop的路径操作以及illstrator, 可以参考以下文章制作font文件

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注