用@font-face实现网页特殊字符(提供本人整理的字符库)

简介:

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

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

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

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

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

  然后保存,选择Generate Fonts:

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

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

  最后,如果你觉得操作太麻烦,可以下载我整理的一个字符库,主要是以箭头为主,因为太常用了。下载地址:http://files.cnblogs.com/hooray/webchar.zip

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

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

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




    本文转自胡尐睿丶博客园博客,原文链接:http://www.cnblogs.com/hooray/archive/2011/11/24/2260644.html,如需转载请自行联系原作者


相关文章
|
机器学习/深度学习 自然语言处理
注意力机制可分为软和硬两类,空间域,通道域
注意力机制是当前深度学习领域比较流行的一个概念。其模仿人的视觉注意力模式,每次只关注与当前任务最相关的源域信息,使得信息的索取更为高效。
注意力机制可分为软和硬两类,空间域,通道域
|
5天前
|
人工智能 JSON 监控
Claude Code 源码泄露:一份价值亿元的 AI 工程公开课
我以为顶级 AI 产品的护城河是模型。读完这 51.2 万行泄露的源码,我发现自己错了。
3985 10
|
15天前
|
人工智能 JSON 机器人
让龙虾成为你的“公众号分身” | 阿里云服务器玩Openclaw
本文带你零成本玩转OpenClaw:学生认证白嫖6个月阿里云服务器,手把手配置飞书机器人、接入免费/高性价比AI模型(NVIDIA/通义),并打造微信公众号“全自动分身”——实时抓热榜、AI选题拆解、一键发布草稿,5分钟完成热点→文章全流程!
11605 134
让龙虾成为你的“公众号分身” | 阿里云服务器玩Openclaw
|
3天前
|
人工智能 数据可视化 安全
王炸组合!阿里云 OpenClaw X 飞书 CLI,开启 Agent 基建狂潮!(附带免费使用6个月服务器)
本文详解如何用阿里云Lighthouse一键部署OpenClaw,结合飞书CLI等工具,让AI真正“动手”——自动群发、生成科研日报、整理知识库。核心理念:未来软件应为AI而生,CLI即AI的“手脚”,实现高效、安全、可控的智能自动化。
1409 6
王炸组合!阿里云 OpenClaw X 飞书 CLI,开启 Agent 基建狂潮!(附带免费使用6个月服务器)
|
5天前
|
人工智能 自然语言处理 数据挖掘
零基础30分钟搞定 Claude Code,这一步90%的人直接跳过了
本文直击Claude Code使用痛点,提供零基础30分钟上手指南:强调必须配置“工作上下文”(about-me.md+anti-ai-style.md)、采用Cowork/Code模式、建立标准文件结构、用提问式提示词驱动AI理解→规划→执行。附可复制模板与真实项目启动法,助你将Claude从聊天工具升级为高效执行系统。
|
5天前
|
人工智能 定位技术
Claude Code源码泄露:8大隐藏功能曝光
2026年3月,Anthropic因配置失误致Claude Code超51万行源码泄露,意外促成“被动开源”。代码中藏有8大未发布功能,揭示其向“超级智能体”演进的完整蓝图,引发AI编程领域震动。(239字)
2294 9

热门文章

最新文章