• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 用@font-face实现网页特殊字符(制作自定义字体)

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

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含font-face,特殊字符等相关知识,佚名 希望在学习及工作中可以帮助到您

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

  首先,我们去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个方向的箭头就可以只记录一个,通过代码来让其进行旋转,来减少字符库文件的大小。

您可能想查找下面的文章:

  • @Font-face的基本用法及让全部浏览器都兼容的方法
  • 用@font-face实现网页特殊字符(制作自定义字体)

相关文章

  • 2017-08-06网页中使用任意字体之实际操作附演示
  • 2018-08-23实战经验!如何制订能有效提高自己的工作目标?
  • 2018-08-23关于极简主义设计,这篇文章帮你安排得明明白白
  • 2017-08-06网页设计心得 高效编写网页代码
  • 2017-08-06怎么设计响应式WEB?响应式WEB设计的优缺点
  • 2018-08-23版本控制工具 Abstract 是如何提升设计团队协作效率的?
  • 2018-08-23超全面!正确使用字体的10个黄金规则
  • 2017-08-06设置网页图片热点链接以及坐标值示例代码
  • 2018-08-23我们邀请了搜狐的UE设计组长,教你应聘UE 设计师!
  • 2018-08-23让你脑洞大开的创新思维方法系列:奔驰法

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 网页制作绝对路径与相对路径的区别
    • 新姿势!用自然灵活的波纹曲线来柔化你的设计
    • AI+AE教程!教你制作酷酷的动感灵魂小鼓手
    • 超全面!一个完整的交互设计稿有哪些必备元素?
    • 都是好图片,为什么你拿来用就怪怪的?
    • windows下NodeJS安装配置步骤
    • 让传达更有效!7个提升数据可视化的实用技巧
    • 如何巧用Slogan,让Banner变得更有设计感!
    • 如何开好需求评审会?36氪产品总监告诉你!
    • 腾讯设计师:我做设计这七年里的心态变化

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有