搜索
首页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
HTML,CSS和JavaScript的未来:网络开发趋势HTML,CSS和JavaScript的未来:网络开发趋势Apr 19, 2025 am 12:02 AM

HTML的未来趋势是语义化和Web组件,CSS的未来趋势是CSS-in-JS和CSSHoudini,JavaScript的未来趋势是WebAssembly和Serverless。1.HTML的语义化提高可访问性和SEO效果,Web组件提升开发效率但需注意浏览器兼容性。2.CSS-in-JS增强样式管理灵活性但可能增大文件体积,CSSHoudini允许直接操作CSS渲染。3.WebAssembly优化浏览器应用性能但学习曲线陡,Serverless简化开发但需优化冷启动问题。

HTML:结构,CSS:样式,JavaScript:行为HTML:结构,CSS:样式,JavaScript:行为Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web开发中的作用分别是:1.HTML定义网页结构,2.CSS控制网页样式,3.JavaScript添加动态行为。它们共同构建了现代网站的框架、美观和交互性。

HTML的未来:网络设计的发展和趋势HTML的未来:网络设计的发展和趋势Apr 17, 2025 am 12:12 AM

HTML的未来充满了无限可能。1)新功能和标准将包括更多的语义化标签和WebComponents的普及。2)网页设计趋势将继续向响应式和无障碍设计发展。3)性能优化将通过响应式图片加载和延迟加载技术提升用户体验。

HTML与CSS vs. JavaScript:比较概述HTML与CSS vs. JavaScript:比较概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在网页开发中的角色分别是:HTML负责内容结构,CSS负责样式,JavaScript负责动态行为。1.HTML通过标签定义网页结构和内容,确保语义化。2.CSS通过选择器和属性控制网页样式,使其美观易读。3.JavaScript通过脚本控制网页行为,实现动态和交互功能。

HTML:是编程语言还是其他?HTML:是编程语言还是其他?Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1)htmlStructures andFormatSwebContentusingtags.2)itworkswithcsssforstylingandjavascript for Interactivity,增强WebevebDevelopment。

HTML:建立网页的结构HTML:建立网页的结构Apr 14, 2025 am 12:14 AM

HTML是构建网页结构的基石。1.HTML定义内容结构和语义,使用、、等标签。2.提供语义化标记,如、、等,提升SEO效果。3.通过标签实现用户交互,需注意表单验证。4.使用、等高级元素结合JavaScript实现动态效果。5.常见错误包括标签未闭合和属性值未加引号,需使用验证工具。6.优化策略包括减少HTTP请求、压缩HTML、使用语义化标签等。

从文本到网站:HTML的力量从文本到网站:HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一种用于构建网页的语言,通过标签和属性定义网页结构和内容。1)HTML通过标签组织文档结构,如、。2)浏览器解析HTML构建DOM并渲染网页。3)HTML5的新特性如、、增强了多媒体功能。4)常见错误包括标签未闭合和属性值未加引号。5)优化建议包括使用语义化标签和减少文件大小。

了解HTML,CSS和JavaScript:初学者指南了解HTML,CSS和JavaScript:初学者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

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无尽的。

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SecLists

SecLists

SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )专业的PHP集成开发工具

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

功能强大的PHP集成开发环境