将图片表情转化成emoji字体

关于什么emoji就不多说了,这个不是本文的重点,有兴趣的童鞋可以看下以下几篇文章:

1、https://www.cnblogs.com/batsing/p/emoji_iconfont.html

2、http://ragnraok.github.io/android-emoji-font-method.html

3、https://yanzhantao.com/web-emoji.html

 

这篇文章主要介绍下如何将网上已有的图片表情转化成emoji字体,方便使用,同时也可提升效率。

 

废话不多说,让我们开始吧~~

首先,为了方便使用make命令,我使用了Linux系统(CentOS 6.9 Final),具体你可以在虚拟机里装个CentOS系统,后边的介绍都是在CentOS里操作的。

 

1、安装Python 2.X,最好是安装2.7以上版本

2、安装完后记得安装pip命令,然后执行安装pip install fonttools

上边由于我已经安装过了,所以提示已经存在。

 

3、下载color-emoji包,里边有生成emoji字体所需的模板以及相应的工具,我已经完整fork过来了,下载地址:  https://github.com/flydream3618/color-emoji

4、解压color-emoji-master.zip,我们在examples里头找个样本来作为我们的生成模板,这里我选择【FruityGirl】,复制一份在examples目录下,改改名字,这里我改成了【testFont】

5、去网上找个png格式的图片表情包,最好是高清点的,这里我下载了微信表情,尺寸72x72,方便适应手机端,尺寸太小手机端会看着很小,然后将下载好的表情,放到上一步复制的【testFont】png目录下:

6、将png文件重新命名,文件名将作为unicode编码值,所以不能随便取,一般推荐E开始,比如E001就代表0xe001。也可以使用我制作的一键重命名bat脚本,放到图片目录下(windows下运行哦~~),双击就OK了:

setlocal enabledelayedexpansion
set /a a=1
for /f %%i in ('dir /b *.png') do (
 if !a! LSS 10 (
 echo !a! >> a.txt
 ren %%i "E00!a!.png"
 )
 if !a! GEQ 10 if !a! LSS 100 (
 ren %%i "E0!a!.png"
 )
 if !a! GEQ 100 (
 ren %%i "E!a!.png"
 )
 set /a a+=1
 )

7、将testFont目录下的FruityGirl.tmpl.ttx.tmpl重命名为:testFont.tmpl.ttx.tmpl,然后notepad打开它,修正几个地方的数据,替换为下面这样的,有点长,可以复制下来,使用notepad的compare插件对着看:

<?xml version="1.0" encoding="ISO-8859-1"?>
<ttFont sfntVersion="\x00\x01\x00\x00" ttLibVersion="2.3">

  <GlyphOrder>
    <!-- The 'id' attribute is only for humans; it is ignored when parsed. -->
    <GlyphID id="0" name=".notdef"/>
  </GlyphOrder>

  <head>
    <!-- Most of this table will be recalculated by the compiler -->
    <tableVersion value="1.0"/>
    <fontRevision value="1.0"/>
    <checkSumAdjustment value="0x86dd9ae7"/>
    <magicNumber value="0x5f0f3cf5"/>
    <flags value="00000000 00001011"/>
    <unitsPerEm value="2048"/>
    <created value="Wed May 22 20:07:39 2013"/>
    <modified value="Wed May 22 20:07:39 2013"/>
    <xMin value="0"/>
    <yMin value="-500"/>
    <xMax value="2550"/>
    <yMax value="1900"/>
    <macStyle value="00000000 00000000"/>
    <lowestRecPPEM value="8"/>
    <fontDirectionHint value="2"/>
    <indexToLocFormat value="0"/>
    <glyphDataFormat value="0"/>
  </head>

  <hhea>
    <tableVersion value="1.0"/>
    <ascent value="1900"/>
    <descent value="-500"/>
    <lineGap value="0"/>
    <advanceWidthMax value="2550"/>
    <minLeftSideBearing value="0"/>
    <minRightSideBearing value="0"/>
    <xMaxExtent value="2550"/>
    <caretSlopeRise value="1"/>
    <caretSlopeRun value="0"/>
    <caretOffset value="0"/>
    <reserved0 value="0"/>
    <reserved1 value="0"/>
    <reserved2 value="0"/>
    <reserved3 value="0"/>
    <metricDataFormat value="0"/>
    <numberOfHMetrics value="4"/>
  </hhea>

  <maxp>
    <!-- Most of this table will be recalculated by the compiler -->
    <tableVersion value="0x10000"/>
    <numGlyphs value="32"/>
    <maxPoints value="8"/>
    <maxContours value="2"/>
    <maxCompositePoints value="0"/>
    <maxCompositeContours value="0"/>
    <maxZones value="2"/>
    <maxTwilightPoints value="0"/>
    <maxStorage value="1"/>
    <maxFunctionDefs value="1"/>
    <maxInstructionDefs value="0"/>
    <maxStackElements value="64"/>
    <maxSizeOfInstructions value="46"/>
    <maxComponentElements value="0"/>
    <maxComponentDepth value="0"/>
  </maxp>

  <OS_2>
    <version value="4"/>
    <xAvgCharWidth value="2550"/>
    <usWeightClass value="400"/>
    <usWidthClass value="5"/>
    <fsType value="00000000 00000000"/>
    <ySubscriptXSize value="1331"/>
    <ySubscriptYSize value="1433"/>
    <ySubscriptXOffset value="0"/>
    <ySubscriptYOffset value="286"/>
    <ySuperscriptXSize value="1331"/>
    <ySuperscriptYSize value="1433"/>
    <ySuperscriptXOffset value="0"/>
    <ySuperscriptYOffset value="983"/>
    <yStrikeoutSize value="102"/>
    <yStrikeoutPosition value="530"/>
    <sFamilyClass value="0"/>
    <panose>
      <bFamilyType value="2"/>
      <bSerifStyle value="0"/>
      <bWeight value="6"/>
      <bProportion value="9"/>
      <bContrast value="0"/>
      <bStrokeVariation value="0"/>
      <bArmStyle value="0"/>
      <bLetterForm value="0"/>
      <bMidline value="0"/>
      <bXHeight value="0"/>
    </panose>
    <ulUnicodeRange1 value="00000000 00000000 00000000 00000001"/>
    <ulUnicodeRange2 value="00000000 00000000 00000000 00000000"/>
    <ulUnicodeRange3 value="00000000 00000000 00000000 00000000"/>
    <ulUnicodeRange4 value="00000000 00000000 00000000 00000000"/>
    <achVendID value="GOOG"/>
    <fsSelection value="00000000 11000000"/>
    <fsFirstCharIndex value="0"/>
    <fsLastCharIndex value="90"/>
    <sTypoAscender value="1900"/>
    <sTypoDescender value="-500"/>
    <sTypoLineGap value="0"/>
    <usWinAscent value="1900"/>
    <usWinDescent value="500"/>
    <ulCodePageRange1 value="00000000 00000000 00000000 00000001"/>
    <ulCodePageRange2 value="00000000 00000000 00000000 00000000"/>
    <sxHeight value="0"/>
    <sCapHeight value="1900"/>
    <usDefaultChar value="0"/>
    <usBreakChar value="32"/>
    <usMaxContex value="1"/>
  </OS_2>

  <hmtx>
    <mtx name=".notdef" width="2550" lsb="0"/>
  </hmtx>

  <cmap>
    <tableVersion version="0"/>
    <cmap_format_4 platformID="3" platEncID="1" language="0">
      <map code="0x0" name=".notdef"/><!-- &lt;control> -->
    </cmap_format_4>
  </cmap>

  <name>
    <namerecord nameID="0" platformID="1" platEncID="0" langID="0x0">
      Copyright 2013, Google, Inc.
    </namerecord>
    <namerecord nameID="1" platformID="1" platEncID="0" langID="0x0">
      FruityGirl
    </namerecord>
    <namerecord nameID="2" platformID="1" platEncID="0" langID="0x0">
      Medium
    </namerecord>
    <namerecord nameID="3" platformID="1" platEncID="0" langID="0x0">
      FontForge 2.0 : FruityGirl : 22-5-2013
    </namerecord>
    <namerecord nameID="4" platformID="1" platEncID="0" langID="0x0">
      FruityGirl
    </namerecord>
    <namerecord nameID="5" platformID="1" platEncID="0" langID="0x0">
      Version 001.000 
    </namerecord>
    <namerecord nameID="6" platformID="1" platEncID="0" langID="0x0">
      FruityGirl
    </namerecord>
    <namerecord nameID="9" platformID="1" platEncID="0" langID="0x0">
      Xiangye Xiao
    </namerecord>
    <namerecord nameID="13" platformID="1" platEncID="0" langID="0x0">
      Copyright (c) 2013, Google Inc.,&#10;&#10;This Font Software is licensed under the SIL Open Font License, Version 1.1.&#10;This license is copied below, and is also available with a FAQ at:&#10;http://scripts.sil.org/OFL&#10;&#10;&#10;-----------------------------------------------------------&#10;SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007&#10;-----------------------------------------------------------&#10;&#10;PREAMBLE&#10;The goals of the Open Font License (OFL) are to stimulate worldwide&#10;development of collaborative font projects, to support the font creation&#10;efforts of academic and linguistic communities, and to provide a free and&#10;open framework in which fonts may be shared and improved in partnership&#10;with others.&#10;&#10;The OFL allows the licensed fonts to be used, studied, modified and&#10;redistributed freely as long as they are not sold by themselves. The&#10;fonts, including any derivative works, can be bundled, embedded, &#10;redistributed and/or sold with any software provided that any reserved&#10;names are not used by derivative works. The fonts and derivatives,&#10;however, cannot be released under any other type of license. The&#10;requirement for fonts to remain under this license does not apply&#10;to any document created using the fonts or their derivatives.&#10;&#10;DEFINITIONS&#10;"Font Software" refers to the set of files released by the Copyright&#10;Holder(s) under this license and clearly marked as such. This may&#10;include source files, build scripts and documentation.&#10;&#10;"Reserved Font Name" refers to any names specified as such after the&#10;copyright statement(s).&#10;&#10;"Original Version" refers to the collection of Font Software components as&#10;distributed by the Copyright Holder(s).&#10;&#10;"Modified Version" refers to any derivative made by adding to, deleting,&#10;or substituting -- in part or in whole -- any of the components of the&#10;Original Version, by changing formats or by porting the Font Software to a&#10;new environment.&#10;&#10;"Author" refers to any designer, engineer, programmer, technical&#10;writer or other person who contributed to the Font Software.&#10;&#10;PERMISSION &amp; CONDITIONS&#10;Permission is hereby granted, free of charge, to any person obtaining&#10;a copy of the Font Software, to use, study, copy, merge, embed, modify,&#10;redistribute, and sell modified and unmodified copies of the Font&#10;Software, subject to the following conditions:&#10;&#10;1) Neither the Font Software nor any of its individual components,&#10;in Original or Modified Versions, may be sold by itself.&#10;&#10;2) Original or Modified Versions of the Font Software may be bundled,&#10;redistributed and/or sold with any software, provided that each copy&#10;contains the above copyright notice and this license. These can be&#10;included either as stand-alone text files, human-readable headers or&#10;in the appropriate machine-readable metadata fields within text or&#10;binary files as long as those fields can be easily viewed by the user.&#10;&#10;3) No Modified Version of the Font Software may use the Reserved Font&#10;Name(s) unless explicit written permission is granted by the corresponding&#10;Copyright Holder. This restriction only applies to the primary font name as&#10;presented to the users.&#10;&#10;4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font&#10;Software shall not be used to promote, endorse or advertise any&#10;Modified Version, except to acknowledge the contribution(s) of the&#10;Copyright Holder(s) and the Author(s) or with their explicit written&#10;permission.&#10;&#10;5) The Font Software, modified or unmodified, in part or in whole,&#10;must be distributed entirely under this license, and must not be&#10;distributed under any other license. The requirement for fonts to&#10;remain under this license does not apply to any document created&#10;using the Font Software.&#10;&#10;TERMINATION&#10;This license becomes null and void if any of the above conditions are&#10;not met.&#10;&#10;DISCLAIMER&#10;THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,&#10;EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF&#10;MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT&#10;OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE&#10;COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,&#10;INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL&#10;DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING&#10;FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM&#10;OTHER DEALINGS IN THE FONT SOFTWARE.
    </namerecord>
    <namerecord nameID="14" platformID="1" platEncID="0" langID="0x0">
      http://scripts.sil.org/OFL
    </namerecord>
    <namerecord nameID="0" platformID="3" platEncID="1" langID="0x409">
      Copyright 2013, Google, Inc.
    </namerecord>
    <namerecord nameID="1" platformID="3" platEncID="1" langID="0x409">
      FruityGirl
    </namerecord>
    <namerecord nameID="2" platformID="3" platEncID="1" langID="0x409">
      Medium
    </namerecord>
    <namerecord nameID="3" platformID="3" platEncID="1" langID="0x409">
      FontForge 2.0 : FruityGirl : 22-5-2013
    </namerecord>
    <namerecord nameID="4" platformID="3" platEncID="1" langID="0x409">
      FruityGirl
    </namerecord>
    <namerecord nameID="5" platformID="3" platEncID="1" langID="0x409">
      Version 001.000 
    </namerecord>
    <namerecord nameID="6" platformID="3" platEncID="1" langID="0x409">
      FruityGirl
    </namerecord>
    <namerecord nameID="9" platformID="3" platEncID="1" langID="0x409">
      Xiangye Xiao
    </namerecord>
    <namerecord nameID="13" platformID="3" platEncID="1" langID="0x409">
      Copyright (c) 2013, Google Inc.,&#10;&#10;This Font Software is licensed under the SIL Open Font License, Version 1.1.&#10;This license is copied below, and is also available with a FAQ at:&#10;http://scripts.sil.org/OFL&#10;&#10;&#10;-----------------------------------------------------------&#10;SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007&#10;-----------------------------------------------------------&#10;&#10;PREAMBLE&#10;The goals of the Open Font License (OFL) are to stimulate worldwide&#10;development of collaborative font projects, to support the font creation&#10;efforts of academic and linguistic communities, and to provide a free and&#10;open framework in which fonts may be shared and improved in partnership&#10;with others.&#10;&#10;The OFL allows the licensed fonts to be used, studied, modified and&#10;redistributed freely as long as they are not sold by themselves. The&#10;fonts, including any derivative works, can be bundled, embedded, &#10;redistributed and/or sold with any software provided that any reserved&#10;names are not used by derivative works. The fonts and derivatives,&#10;however, cannot be released under any other type of license. The&#10;requirement for fonts to remain under this license does not apply&#10;to any document created using the fonts or their derivatives.&#10;&#10;DEFINITIONS&#10;"Font Software" refers to the set of files released by the Copyright&#10;Holder(s) under this license and clearly marked as such. This may&#10;include source files, build scripts and documentation.&#10;&#10;"Reserved Font Name" refers to any names specified as such after the&#10;copyright statement(s).&#10;&#10;"Original Version" refers to the collection of Font Software components as&#10;distributed by the Copyright Holder(s).&#10;&#10;"Modified Version" refers to any derivative made by adding to, deleting,&#10;or substituting -- in part or in whole -- any of the components of the&#10;Original Version, by changing formats or by porting the Font Software to a&#10;new environment.&#10;&#10;"Author" refers to any designer, engineer, programmer, technical&#10;writer or other person who contributed to the Font Software.&#10;&#10;PERMISSION &amp; CONDITIONS&#10;Permission is hereby granted, free of charge, to any person obtaining&#10;a copy of the Font Software, to use, study, copy, merge, embed, modify,&#10;redistribute, and sell modified and unmodified copies of the Font&#10;Software, subject to the following conditions:&#10;&#10;1) Neither the Font Software nor any of its individual components,&#10;in Original or Modified Versions, may be sold by itself.&#10;&#10;2) Original or Modified Versions of the Font Software may be bundled,&#10;redistributed and/or sold with any software, provided that each copy&#10;contains the above copyright notice and this license. These can be&#10;included either as stand-alone text files, human-readable headers or&#10;in the appropriate machine-readable metadata fields within text or&#10;binary files as long as those fields can be easily viewed by the user.&#10;&#10;3) No Modified Version of the Font Software may use the Reserved Font&#10;Name(s) unless explicit written permission is granted by the corresponding&#10;Copyright Holder. This restriction only applies to the primary font name as&#10;presented to the users.&#10;&#10;4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font&#10;Software shall not be used to promote, endorse or advertise any&#10;Modified Version, except to acknowledge the contribution(s) of the&#10;Copyright Holder(s) and the Author(s) or with their explicit written&#10;permission.&#10;&#10;5) The Font Software, modified or unmodified, in part or in whole,&#10;must be distributed entirely under this license, and must not be&#10;distributed under any other license. The requirement for fonts to&#10;remain under this license does not apply to any document created&#10;using the Font Software.&#10;&#10;TERMINATION&#10;This license becomes null and void if any of the above conditions are&#10;not met.&#10;&#10;DISCLAIMER&#10;THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,&#10;EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF&#10;MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT&#10;OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE&#10;COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,&#10;INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL&#10;DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING&#10;FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM&#10;OTHER DEALINGS IN THE FONT SOFTWARE.
    </namerecord>
    <namerecord nameID="14" platformID="3" platEncID="1" langID="0x409">
      http://scripts.sil.org/OFL
    </namerecord>
  </name>

  <post>
    <formatType value="3.0"/>
    <italicAngle value="0.0"/>
    <underlinePosition value="-1244"/>
    <underlineThickness value="131"/>
    <isFixedPitch value="1"/>
    <minMemType42 value="0"/>
    <maxMemType42 value="0"/>
    <minMemType1 value="0"/>
    <maxMemType1 value="0"/>
    <psNames>
    </psNames>
    <extraNames>
    </extraNames>
  </post>

</ttFont>

8、上边的修改主要是为了使表情跟纯文字位置保持一致,不会出现高度不一致问题。如果之前操作都没有问题,那么我们接下来进入命令行testFont目录,然后make一下就可以了,一切顺利会看到如下结果:

上边红色部分就是我们最终得到的emoji字体。

9、最后,我们只需在html页面引入这个字体文件,然后使用unicode编码就能显示我们的表情文字了:

@font-face
{
	font-family:'testFont';
	src: url('/test/testFont.ttf') format('truetype');
}

input[class=one],
div {
    font-family: 'testFont';
	font-style: normal;
    -webkit-font-smoothing: antialiased;
	font-size: 36px;
	height:96px;
	line-height:96px;
}

10、当然了,这个也适用于安卓(4.4以后的版本)应用,setTypeface一下就OK了。

 

完!

 

  • 2
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 11
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 11
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值