怎么用@font-face实现网页特殊字符

发布时间:2021-10-12 15:36:49 作者:小新
来源:亿速云 阅读:162

这篇文章主要介绍怎么用@font-face实现网页特殊字符,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

  前几天写了篇文章,就是用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实现网页特殊字符

以上是“怎么用@font-face实现网页特殊字符”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!

推荐阅读:
  1. 字蛛(font-spider)让你爱上 @font-face 网页自定义字体
  2. font-face跨域办法

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

font-face

上一篇:HTTPS基于协议和配置的优化是怎样的

下一篇:HTTPS如何进行协议层以外的实践

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》