自定义 iconfont 字体图标

2019-09-12T18:54:00

css 部分:

# 第一步:使用 font-face 声明字体 
@font-face {
    font-family: 'webfont';
    font-display: swap;
    src: url('webfont.eot'); /* IE9 */
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('webfont.woff2') format('woff2'),
    url('webfont.woff') format('woff'), /* chrome、firefox */
    url('webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('webfont.svg#webfont') format('svg'); /* iOS 4.1- */
}

`@font-face` 中的 src 可以根据需求声明单个或者多个,不同类型的字体主要为了应对不同浏览器的支持。如果只有一种 ttf 字体,只声明 ttf 类型即可:`src: url('webfont.ttf') format('truetype');`。

一般字体会与声明字体的 CSS 文件放在同一目录下,以方便加载。
 
# 第二步:定义使用 webfont 的样式 
.web-font {
    font-family: "webfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
 
.icon-fendi:before {
  content: "\e601";
}
 
# 第三步:为文字加上对应的样式 
<i class="web-font icon-fendi"></i>

字体编辑

使用软件 FontCreator 。

FontCreator破解版 12.0.0.2546 注册版

在线字体转换

fontke

使用 FontCreator 编辑 iconfont 文件

使用 iconfont 字体过程中,会有些修改原有图标图片或者新增字体图标的需求,使用 FontCreator 可以很轻松地完成。

  • 打开 iconfont 文件

  • 按照代码点排序和展示

菜单栏下方有三个 select 选择框,第一个默认无组合即可,后面两个选择代码点,分别表示按照代码点排序和图标项目头部展示代码点。

这里的代码点即 CSS 中定义的 before 的 content 属性值,比如 content: "\e601"; 对应的代码点即 $E601

  • 修改代码点和图标展示内容

右击图标项目,选择字形属性,修改弹框中的代码点项,点击应用即可。

图标内容可以通过双击或者右键编辑进入到修改页面,Alt + 左键选中目标,按住 Ctrl 保持图形变换长宽比,然后拖动目标边框上的框框进行放大缩小(有点像 PS 里的图形转换)。也可以直接 del 删除原有内容,然后右击导入图像,选择需要加进来的新的图片(一般选择黑色填充的图片),确认即可。

  • 保存并替换

默认 Ctrl + s 是保存当前项目,可以选择菜单栏中的文件 -> 导出字体,选择 ttf 或者 woff,或者导出所有类型的字体(如果有需要)。

将保存后的字体替换项目中的字体即可。一般 web 端需要清除缓存之后,才能看到效果。如果新增了图标项目想要使用,需要在对应的字体声明 CSS 中声明新的图标项目对应的图标类(content 值与代码点对应):

.icon-fendi:before {
  content: "\e601";
}

使用新定义的类,参考上面 CSS 部分二、三步。

当前页面是本站的「Baidu MIP」版。发表评论请点击:完整版 »