css使用@font-face引发的一个小案子：小试fontCreator
看到一个通过@font-face引入自定义字体的css例子。
<body>
<p>HTML&CSS</p>
</body>
@font-face自定义字体test，并将该字体应用于字符&，即代码中&。
@font-face{
font-family:test;
src:url(../fonts/test.woff);
unicode-range:U+26;
}
p{
font-family:test;
}
稍稍说明下unicode-range的用途，它是用来控制自定义字体作用在哪些字符上。unicode-range:U+26的意思是，自定义的字体，比如，本例中的test这个font-family仅作用在&上。unicode-range的属性值必须以U+为前缀。后面跟着的是字符对应的16进制unicode码。
让我很好奇的是，.woff这类文件到底是如何改变字形的？或者说，我有什么方法也来尝试制作一份不一样的.woff。
感谢csdn和简书上这两位朋友的分享，他们推荐了FontCreator，所以，我也开始了一次小探索。
首先，当然就是安装FontCreator了。
接下来看看具体怎么使用吧。
Insert contour
File>New，新建一个工程，命名为"test"，其余都默认，点击OK。
这时，我们会看到一个字形预览窗口。默认有235个字形，其中有些已经添加了字形数据，有些则没有，像灰色的ABCDEF等英文字母都没有添加字形数据。
呃，等等，啥叫字形数据?
比如，双击“&”，就进入了字形编辑窗口了。默认是Contour mode（轮廓模式），这些轮廓线就是字形数据。
可以切换到轮廓模式旁边的Point mode(点模式)试试，这些点也是字形数据。
现在我们双击灰色的“A”进去瞧瞧，没有点也没有轮廓线，所以没有字形数据。
那问题来了，怎么添加字形数据呢？那我们试试编辑大写字母“A”吧。Insert>Contour，或者直接使用工具栏上的Insert contour（插入轮廓线）。
单击鼠标左键添加点，连续单击连续添加，点击Apply或者回到绘制的起始点便完成一次绘制。
另外，如果单击添加点的同时，按住鼠标不松手，并且围绕这个点旋转，可以绘制出贝塞尔曲线。
添加点时，按住Shift键，可以绘制直线。
好了，“A”的轮廓基本成型了，只要2这个点连接到1这个点就完成了。最后得到了这样的一个字形。
到最开始的字形预览窗口看看，哈哈，有点意思。
小提示：编辑窗口里，最上面和最下面各有条线，分别叫WinAscent和WinDescent，它俩之间的区域叫可视区，只能在这个区域里进行绘制，否则辛苦画的东西，看不到！
“A”画好了，那我们来验验成果吧。File>Exports Font>Export Web Font(woff/woff2)，得到了test.woff和test.woff2两个文件。
<body>
<p>A</p>
</body>
@font-face{
font-family:test;
src:url(../fonts/test.woff);
}
p{
font-family:test;
}
Free Draw
insert contour的初探暂时结束，我们来看看free draw吧。
free draw?免费绘制？哈哈哈，*绘制哈。
要不，用free draw画大写字母H吧。Insert>Free Draw Contours或者使用工具栏上的Free Draw，单击鼠标左键是画，单击鼠标右键就是橡皮擦了，擦除。
上面有讲说，按住Shift键可以绘制直线，水平直线或垂直直线都可以。
可以了吗？并没有哈。
还有最后一步，需要转换成轮廓线，点击Convert to contours。
回到预览窗口看看，OK。
复制粘贴"造*"
现在我们来试试实现这么一个小需求：“线上演唱会”，“线上”字体是"华文隶书"，“演唱会”的字体是"华文细黑"。
前面我们讲过，新建的工程会默认包含256个字形，而这256个字形里并没有“线”“上”“演”“唱”“会”这5个字。Ctrl + F，提示“Cound not find ‘线’.”
那我们来加。Insert>Charaters，或者直接使用工具栏上按钮Insert characters。
接下来有3个小步骤，首先得找到“线”，find；然后添加，add；最后点击"OK"。
小提示：当前是在test这个页签所在页面进行操作。
“线”“上”“演”“唱”“会”这5个字都添加完了，见下图，每个方框上的标题是它们各自对应的unicode码值。
呃，到哪里去复制"华文隶书"或者"华文细黑"版的字体呢？File>Open installed Font或者直接点击工具栏上的Open an installed font，就能看到本机上的所有字体文件。
双击"华文隶书"，就可以进入了华文隶书的字体文件，STLITI.TTF。我们就是要从STLITI.TTF中找到“线”和“上”，并复制，然后粘贴到我们自己的字体文件test上。Ctrl+F，瞧，在STLITI.TTF里我们找到了“线”。单击鼠标右键，copy下来。
切换到test页签，单击鼠标右键，paste，就好了。
重复操作，继续复制粘贴，添加“上”“演”“唱”“会”。
最后的结果是这样的。
*们造完了，导出字体文件试试吧。
<body>
<p>刘若英 陪你(For U) <span>线上演唱会</span></p>
</body>
@font-face{
font-family:test;
src:url(../fonts/test.otf),
url(../fonts/test.woff);
}
span{
font-family:test;
}
上一篇： 荐 5.3. Java
下一篇： 1.CSS介绍、写法、选择器、优先级