html字体制作,用@font-face实现网页特殊字符(制作自定义字体)

首先，我们去C盘Fonts文件夹里找到WEBDINGS.TTF字体，复制到桌面。接下来，我们需要一个软件，就是“fontforge”，它可以实现制作自定义字体的功能，我们后面就要用它来做一个适用于我们自己的字体库。

下载好后解压，把WEBDINGS.TTF字体复制到里面，运行fontforge.bat并选择字体文件，然后出现这个界面：

很多图形字符吧，是不是发现很多字符以前都用到过，只不是那时是用图片来实现的？

接下来我们要做的就是选择需要的字符，存到另一个字体文件里，因为WEBDINGS.TTF这个文件里的大多数字符都是用不到的，所以直接用这个文件来当我们的字符库有点略大，所以我们只需选择我们需要的就行，操作上我们先新建一个空白的字体文件，点File->New，然后选择需要的字符，并复制到新建的字体文件中，如：

然后保存，选择Generate Fonts：

然后设置保存为.ttf结尾的文件：

这样，我们的字体文件就做好了。但是，还没有结束，因为IE只认识.eof，不认识.ttf，所以我们还需要生成其他的字体文件，关于这个问题，我很早写过篇文章，操作方法都有说明，就不具体介绍了，文章链接：《网页中使用任意字体之实际操作》。

最后，如果你觉得操作太麻烦，可以下载我整理的一个字符库，主要是以箭头为主，因为太常用了。

下载地址

总的来说，这个东西虽然会增加加载页面文件的总大小，但是如果有自己的字符库，操作性会更加多元化。因为我们可以控制字符的大小、颜色，甚至还有阴影、翻转等css3效果，而图片如果要换个颜色，就必须修改，或者重新制作一张，可塑性不强。

PS：我的EonerCMS里，窗口右上和右下的按钮都已经换成字符了，效果挺不错的

PS2：感谢@小熊提供的思路，既然可以用过css3&滤镜实现字符旋转，我们在制作字符库的时候，4个方向的箭头就可以只记录一个，通过代码来让其进行旋转，来减少字符库文件的大小。

html字体制作,用@font-face实现网页特殊字符(制作自定义字体)相关推荐

css3-11 网页如何使用自定义字体
css3-11 网页如何使用自定义字体一.总结一句话总结:下载好字体文件,然后在网页中引入,用src: url('my.otf');来引入,使用的时候就使用自己定义的名字来使用这个字体. 1.网页 ...
WEB安全字体（Web Safe Fonts）-网页设计用什么字体兼容性好?
效果:http://sandbox.runjs.cn/show/qgdljvh4 1 Arial 微软公司的网页核心字体之一,最常用的sans serif字体,当字号很小时不容易阅读.但是,大写的&q ...
java swing 字体设置_如何在Java SWING中设置自定义字体的大小和其他属性(粗体,斜体等)...
通常,当我初始化我想在SWING应用程序中使用的字体时,我这样做: public static final Font TITLEFONT = new Font("Calibri", ...
java 编程字体_Java 是否可以为整个应用程序设置自定义字体？
小编典典是的,反思.这有效(基于此答案): (注意:由于缺乏对自定义字体的支持,因此这是一种解决方法,因此,如果你要更改此情况,请在此处加注星号以投票赞成android问题).注意:请勿在该问题上留 ...
html 安装字体无效果,如何在HTML网站上安装自定义字体
如果使用外部样式表,代码可能是这个样子: @font-face { font-family: Junebug; src: url('Junebug.ttf'); } .junebug { font-f ...
怎么自定义字体_自定义字体@fontface的常见应用
前言 @font-face允许网页自带字体,从而消除对用户电脑字体的依赖.基本用法如下: @font-face { font-family: "family-name"; /* 字 ...
@font-face使用自定义字体
一.自定义字体引用符号是什么? 在制作网页时,有些特殊图标放到字体里面引用类似于二.使用自定义字体引用符号 (已知字体却不知道字体里有多少符号或字体的情况用以下方法) 1.第一步先将制作好的自定义 ...
CSS @font-face(CSS 自定义字体)
转载自:http://www.2cto.com/kf/201312/265179.html @font-face可以实现从服务器端加载字体,所有浏览器中使用的字体就可以不受本地字体的限制.@font- ...
android 自定义字体 ttf,Android APP支持自定义字体
情景:需要为整个应用替换自定义字体. Android对于文字的字体设置主要是通过以下两个对象 FontFamily.Typeface 在XML文件中设置单个字体: android:id="@ ...
CSS 自定义字体样式
作为前端,如果UI设计师给的psd设计图中的文字字体我们电脑中没有(电脑没有自带),如何让这种字体在客户的浏览器中正常显示呢?以前前端程序员是将文字截图直接放入页面(这种方式修改文字内容的话很不方便) ...

html字体制作,用@font-face实现网页特殊字符(制作自定义字体)

html字体制作,用@font-face实现网页特殊字符(制作自定义字体)相关推荐

最新文章

热门文章