看到一个通过@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;
}