css使用@font-face引发的一个小案子：小试fontCreator

最新推荐文章于 2024-07-12 10:28:21 发布

richest_qi

最新推荐文章于 2024-07-12 10:28:21 发布

阅读量600

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qzw752890913/article/details/105765289

版权

css 专栏收录该内容

69 篇文章 4 订阅

订阅专栏

看到一个通过@font-face引入自定义字体的css例子。

<body>
   <p>HTML&amp;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。
File>New 新建一个工程
这时，我们会看到一个字形预览窗口。默认有235个字形，其中有些已经添加了字形数据，有些则没有，像灰色的ABCDEF等英文字母都没有添加字形数据。
在这里插入图片描述
呃，等等，啥叫字形数据?
比如，双击“&”，就进入了字形编辑窗口了。默认是Contour mode（轮廓模式），这些轮廓线就是字形数据。

可以切换到轮廓模式旁边的Point mode(点模式)试试，这些点也是字形数据。
点模式下的&
现在我们双击灰色的“A”进去瞧瞧，没有点也没有轮廓线，所以没有字形数据。

那问题来了，怎么添加字形数据呢？那我们试试编辑大写字母“A”吧。
Insert>Contour，或者直接使用工具栏上的Insert contour（插入轮廓线）。
单击鼠标左键添加点，连续单击连续添加，点击Apply或者回到绘制的起始点便完成一次绘制。
另外，如果单击添加点的同时，按住鼠标不松手，并且围绕这个点旋转，可以绘制出贝塞尔曲线。
添加点时，按住Shift键，可以绘制直线。
在这里插入图片描述
好了，“A”的轮廓基本成型了，只要2这个点连接到1这个点就完成了。最后得到了这样的一个字形。
绘制得到的A
到最开始的字形预览窗口看看，哈哈，有点意思。

小提示：编辑窗口里，最上面和最下面各有条线，分别叫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;
    }

在这里插入图片描述

richest_qi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css使用@font-face引发的一个小案子：小试fontCreator

看到一个通过@font-face引入自定义字体的css例子。<body> <p>HTML&amp;CSS</p> </body>@font-face自定义字体test，并将该字体应用于字符&，即代码中&amp;。 @font-face{ font-family:test;...
复制链接

扫一扫

专栏目录