搜索
首页web前端html教程Icon Font玩法集合_html/css_WEB-ITnose

所谓iconfont就是用字体文件取代图片文件,来展示图标,特殊字体等元素。

---------优点---------

  • 轻薄,字体文件小,一般10-30kb(用字蛛压缩)
  • 兼容,透明完全兼容IE6
  • 丰满,在hover,click等交互效果看来更为方便
  • 百搭,矢量,缩放不变形,方便修改颜色,大小
  • 安静,通过base64编码置于样式表内,不产生图片请求。

IconFont的实现在css里主要体现在@font-face,@font-face是css3中的一个模块,但是喜大普奔的是IE4+就可以支持它了!@font-face主要是把自己定义的Web字体嵌入到你的网页中。

这样我们在web开发的过程中,就可以使用Web安全字体之外的字体了。并且像一些常用的图标,我们也可以定义成font-face。这样就可以方便的使用那些自定义的字体,很轻松的就可以改变他们的颜色大小。省去很多切图的麻烦~

这篇文章主要记录了我的一些学习和实践 -。-

语法规则

@font-face{    font-family:<YourWebFontName>;    src:<source>[<format>];    [font-weight:<weight>];    [font-style:<style>];}

取值说明:

  • YourWebFontName是指你自定义的字体名称,最好是使用你下载的默认字体,它将被引用到你的Web元素中的font-family。
  • source:指的是你自定义的字体的存放路径,可以是相对路径,可以是绝对路径。
  • format:指的是你自定义的字体的格式,主要帮助浏览器识别。其值主要有以下几种类型:truetype(.ttf),opentype(.otf),truetype-aat,embedded-opentype,avg等。
  • weight和style:这个应该很熟悉,weight指是不是粗体,style指的字体样式,比如斜体。

由于foramt涉及到浏览器支持的问题所以这边要说一下各格式的浏览器支持的情况。

  • .ttf【IE9+,FF3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】
  • .otf【FF3.5+,Chrome4.0+,Safari3.1+,Opera10+,iOS Mobile Safari4.2+】
  • .woff(Web Open Font Format)【IE9+,FF3.5+,Chrome6.0+,Safari3.6+,Opera11.1+】
  • .eot(Embedded Open Type).eot是IE专用的字体,可以从.ttf创建此格式字体【IE4+】
  • .svg是基于SVG字体渲染的一种格式【Chrome4.0+,Safari3.1+,Opera10+,iOS Mobile Safari3.2+】

根据以上介绍的浏览器支持的情况来看,在@font-face中我们必须得写上多种字体格式来获得更多浏览器版本的支持!


理论说完,下面要开始实践了


首先,获取特殊字体。获取特殊字体的途径,不外是找到付费网站,或者是自己去搜索然后下载。当然,我们选择后者的情况较多啦~Dafont.com我们经常会在这边找一些字体。

找到了字体,为了获取更多浏览器的支持,我们就需要各种字体格式了转化工具点这里然后我们会看到以下界面

字体格式转换

点击UPLOAD FONTS按钮,然后上传已保存在自己电脑的特殊字体,选择你要转换的格式,选中Agreement那边的选框,之后就可以点击DOWNLOAD YOUR KIT按钮download你所需的字体了。

我的实践

1、我的字体已经下载在本地了,大家可以按上文所述在Dafont.com下载字体2、在fontsquirrel.com转换我自己需要的字体格式然后就有了下图所示的字体们

字体文件

css:

html:

页面:


上文我们有说,@font-face除了可以将本地的字体用到web,也可以将图标做成字体。对于字体图标,在我的实际工作当中深有体会,不用切小图标,不用计算background-position还可以随意修改大小和颜色,简直是太开心了。

首先推荐一些图标字库:

  • iconfont这个是阿里妈妈M2UX的一个icon font字体图标字库,包含了淘宝图标库和阿里妈妈图标库。

  • fontello.com在线定制你自己的icon font字体图标字库,也可以直接从GitHub下载整个图标集,该项目也是开源的。

  • icomoon可以在线导入的SVG格式字体,并迚行编辑,然后下载来使用。

  • Glyphicon Halflings可以在Bootstrap下免费使用。自带了200多个图标。

  • font-awesomeFont Awesome是一个强大的字体制作Icon的案例,作者在Bootstrap Icon的基础上将Icon图片换成了字体来制作。

我们在需要使用字体图标的时候,当然首先就会选择直接去这些网站(或者你也可以自己去发掘其他的一些网站,欢迎分享~)下载。下载的压缩包一般都会直接有各种格式的字体,现成的css文件和html的demo。直接用就好。

如果这些网站满足不了我们的需求的时候,我们就需要自己学着制作一些字体了。

如何制作自己的字体1、fontlab,但是这个应用收费,而且并不便宜2、fontcreator,免费的,最常用。点击查看fontcreator的具体使用方法在我们制作好自己的字体之后,使用方法就和上面介绍的一样了~

参考文档CSS3 @font-face

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
&gt; gt;的目的是什么 元素?&gt; gt;的目的是什么 元素?Mar 21, 2025 pm 12:34 PM

本文讨论了HTML&lt; Progress&gt;元素,其目的,样式和与&lt; meter&gt;元素。主要重点是使用&lt; progress&gt;为了完成任务和LT;仪表&gt;对于stati

&lt; datalist&gt;的目的是什么。 元素?&lt; datalist&gt;的目的是什么。 元素?Mar 21, 2025 pm 12:33 PM

本文讨论了html&lt; datalist&gt;元素,通过提供自动完整建议,改善用户体验并减少错误来增强表格。Character计数:159

&lt; meter&gt;的目的是什么。 元素?&lt; meter&gt;的目的是什么。 元素?Mar 21, 2025 pm 12:35 PM

本文讨论了HTML&lt; meter&gt;元素,用于在一个范围内显示标量或分数值及其在Web开发中的常见应用。它区分了&lt; meter&gt;从&lt; progress&gt;和前

视口元标签是什么?为什么对响应式设计很重要?视口元标签是什么?为什么对响应式设计很重要?Mar 20, 2025 pm 05:56 PM

本文讨论了视口元标签,这对于移动设备上的响应式Web设计至关重要。它解释了如何正确使用确保最佳的内容缩放和用户交互,而滥用可能会导致设计和可访问性问题。

如何使用HTML5表单验证属性来验证用户输入?如何使用HTML5表单验证属性来验证用户输入?Mar 17, 2025 pm 12:27 PM

本文讨论了使用HTML5表单验证属性,例如必需的,图案,最小,最大和长度限制,以直接在浏览器中验证用户输入。

HTML5中跨浏览器兼容性的最佳实践是什么?HTML5中跨浏览器兼容性的最佳实践是什么?Mar 17, 2025 pm 12:20 PM

文章讨论了确保HTML5跨浏览器兼容性的最佳实践,重点是特征检测,进行性增强和测试方法。

我如何使用html5&lt; time&gt; 元素以语义表示日期和时间?我如何使用html5&lt; time&gt; 元素以语义表示日期和时间?Mar 12, 2025 pm 04:05 PM

本文解释了HTML5&lt; time&gt;语义日期/时间表示的元素。 它强调了DateTime属性对机器可读性(ISO 8601格式)的重要性,并在人类可读文本旁边,增强Accessibilit

&lt; iframe&gt;的目的是什么。 标签?使用时的安全考虑是什么?&lt; iframe&gt;的目的是什么。 标签?使用时的安全考虑是什么?Mar 20, 2025 pm 06:05 PM

本文讨论了&lt; iframe&gt;将外部内容嵌入网页,其常见用途,安全风险以及诸如对象标签和API等替代方案的目的。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

MinGW - 适用于 Windows 的极简 GNU

MinGW - 适用于 Windows 的极简 GNU

这个项目正在迁移到osdn.net/projects/mingw的过程中,你可以继续在那里关注我们。MinGW:GNU编译器集合(GCC)的本地Windows移植版本,可自由分发的导入库和用于构建本地Windows应用程序的头文件;包括对MSVC运行时的扩展,以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

mPDF

mPDF

mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),