关于什么emoji就不多说了,这个不是本文的重点,有兴趣的童鞋可以看下以下几篇文章:
这篇文章主要介绍下如何将网上已有的图片表情转化成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"/><!-- <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.,
This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
http://scripts.sil.org/OFL
-----------------------------------------------------------
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
-----------------------------------------------------------
PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide
development of collaborative font projects, to support the font creation
efforts of academic and linguistic communities, and to provide a free and
open framework in which fonts may be shared and improved in partnership
with others.
The OFL allows the licensed fonts to be used, studied, modified and
redistributed freely as long as they are not sold by themselves. The
fonts, including any derivative works, can be bundled, embedded,
redistributed and/or sold with any software provided that any reserved
names are not used by derivative works. The fonts and derivatives,
however, cannot be released under any other type of license. The
requirement for fonts to remain under this license does not apply
to any document created using the fonts or their derivatives.
DEFINITIONS
"Font Software" refers to the set of files released by the Copyright
Holder(s) under this license and clearly marked as such. This may
include source files, build scripts and documentation.
"Reserved Font Name" refers to any names specified as such after the
copyright statement(s).
"Original Version" refers to the collection of Font Software components as
distributed by the Copyright Holder(s).
"Modified Version" refers to any derivative made by adding to, deleting,
or substituting -- in part or in whole -- any of the components of the
Original Version, by changing formats or by porting the Font Software to a
new environment.
"Author" refers to any designer, engineer, programmer, technical
writer or other person who contributed to the Font Software.
PERMISSION & CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining
a copy of the Font Software, to use, study, copy, merge, embed, modify,
redistribute, and sell modified and unmodified copies of the Font
Software, subject to the following conditions:
1) Neither the Font Software nor any of its individual components,
in Original or Modified Versions, may be sold by itself.
2) Original or Modified Versions of the Font Software may be bundled,
redistributed and/or sold with any software, provided that each copy
contains the above copyright notice and this license. These can be
included either as stand-alone text files, human-readable headers or
in the appropriate machine-readable metadata fields within text or
binary files as long as those fields can be easily viewed by the user.
3) No Modified Version of the Font Software may use the Reserved Font
Name(s) unless explicit written permission is granted by the corresponding
Copyright Holder. This restriction only applies to the primary font name as
presented to the users.
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
Software shall not be used to promote, endorse or advertise any
Modified Version, except to acknowledge the contribution(s) of the
Copyright Holder(s) and the Author(s) or with their explicit written
permission.
5) The Font Software, modified or unmodified, in part or in whole,
must be distributed entirely under this license, and must not be
distributed under any other license. The requirement for fonts to
remain under this license does not apply to any document created
using the Font Software.
TERMINATION
This license becomes null and void if any of the above conditions are
not met.
DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
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.,
This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
http://scripts.sil.org/OFL
-----------------------------------------------------------
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
-----------------------------------------------------------
PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide
development of collaborative font projects, to support the font creation
efforts of academic and linguistic communities, and to provide a free and
open framework in which fonts may be shared and improved in partnership
with others.
The OFL allows the licensed fonts to be used, studied, modified and
redistributed freely as long as they are not sold by themselves. The
fonts, including any derivative works, can be bundled, embedded,
redistributed and/or sold with any software provided that any reserved
names are not used by derivative works. The fonts and derivatives,
however, cannot be released under any other type of license. The
requirement for fonts to remain under this license does not apply
to any document created using the fonts or their derivatives.
DEFINITIONS
"Font Software" refers to the set of files released by the Copyright
Holder(s) under this license and clearly marked as such. This may
include source files, build scripts and documentation.
"Reserved Font Name" refers to any names specified as such after the
copyright statement(s).
"Original Version" refers to the collection of Font Software components as
distributed by the Copyright Holder(s).
"Modified Version" refers to any derivative made by adding to, deleting,
or substituting -- in part or in whole -- any of the components of the
Original Version, by changing formats or by porting the Font Software to a
new environment.
"Author" refers to any designer, engineer, programmer, technical
writer or other person who contributed to the Font Software.
PERMISSION & CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining
a copy of the Font Software, to use, study, copy, merge, embed, modify,
redistribute, and sell modified and unmodified copies of the Font
Software, subject to the following conditions:
1) Neither the Font Software nor any of its individual components,
in Original or Modified Versions, may be sold by itself.
2) Original or Modified Versions of the Font Software may be bundled,
redistributed and/or sold with any software, provided that each copy
contains the above copyright notice and this license. These can be
included either as stand-alone text files, human-readable headers or
in the appropriate machine-readable metadata fields within text or
binary files as long as those fields can be easily viewed by the user.
3) No Modified Version of the Font Software may use the Reserved Font
Name(s) unless explicit written permission is granted by the corresponding
Copyright Holder. This restriction only applies to the primary font name as
presented to the users.
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
Software shall not be used to promote, endorse or advertise any
Modified Version, except to acknowledge the contribution(s) of the
Copyright Holder(s) and the Author(s) or with their explicit written
permission.
5) The Font Software, modified or unmodified, in part or in whole,
must be distributed entirely under this license, and must not be
distributed under any other license. The requirement for fonts to
remain under this license does not apply to any document created
using the Font Software.
TERMINATION
This license becomes null and void if any of the above conditions are
not met.
DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
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了。
完!