金狮镖局 Design By www.egabc.com

  前几天写了篇文章,就是用css来实现三角箭头,虽然达到需要的效果了,但还是有一些问题,比如依旧需要靠position来定位箭头的位置。而且目前也只能实现三角箭头,若想用一些其他的字符,还是得用图片。于是最近一直在寻找更好的办法,最终被我找到了……

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

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

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

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

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

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

  然后保存,选择Generate Fonts:

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

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

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

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

  最后,如果你觉得操作太麻烦,可以下载我整理的一个字符库,主要是以箭头为主,因为太常用了。
  下载地址用@font-face实现网页特殊字符(制作自定义字体)

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

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

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

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

标签:
font-face,特殊字符

金狮镖局 Design By www.egabc.com
金狮镖局 免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
金狮镖局 Design By www.egabc.com

评论“用@font-face实现网页特殊字符(制作自定义字体)”

暂无用@font-face实现网页特殊字符(制作自定义字体)的评论...

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。