首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

字体系列材料图标不是系统字体

是指在前端开发中,为了美化界面和提升用户体验,开发人员可以使用非系统字体来展示图标和特殊样式。这种字体通常被称为图标字体或矢量图标字体。

图标字体是一种特殊的字体文件,其中每个字符都对应一个图标或特殊样式。通过在HTML页面中引入字体文件,并使用相应的CSS样式,开发人员可以轻松地在网页中使用这些图标。

优势:

  1. 矢量化:图标字体使用矢量图形表示,可以无损放大或缩小,保持清晰度和质量。
  2. 灵活性:开发人员可以通过调整字体大小、颜色、阴影等属性来自定义图标的外观。
  3. 轻量化:相比使用图片来展示图标,使用字体图标可以减少页面加载时间和带宽消耗。
  4. 易于使用和维护:通过简单的CSS类名,开发人员可以在页面中使用和管理大量的图标。

应用场景:

  1. 网站导航栏和菜单:可以使用图标字体来代替传统的文本链接,使导航更加直观和美观。
  2. 按钮和操作元素:图标字体可以用于按钮、复选框、单选框等用户交互元素,增加可视化效果。
  3. 提示和状态图标:例如警告、成功、错误等状态的图标可以用图标字体来表示。
  4. 社交媒体图标:常见的社交媒体图标,如Facebook、Twitter、Instagram等,可以使用图标字体来展示。

推荐的腾讯云相关产品和产品介绍链接地址: 腾讯云提供了一系列与字体图标相关的产品和服务,包括:

  1. 腾讯云字体库:腾讯云字体库是一个在线字体服务平台,提供了丰富的字体资源供开发人员使用。开发人员可以通过该平台选择合适的字体图标,并获取相应的CSS代码和字体文件链接。详细信息请参考:腾讯云字体库
  2. 腾讯云CDN加速:腾讯云CDN加速服务可以帮助开发人员将字体文件分发到全球各地的加速节点,提高字体文件的加载速度和稳定性。详细信息请参考:腾讯云CDN加速

请注意,以上推荐的腾讯云产品仅供参考,具体选择和使用需根据实际需求进行评估和决策。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

字体图标

我们后面会学习移动端响应式,很多情况下希望我们的图标是可以缩放的。此时,一个非常重要的技术出现了, 这就是字体图标(iconfont)....字体图标使用流程 总体来说,字体图标按照如下流程: ? 设计字体图标 UI设计人员在 illustrator 或 Sketch 这类矢量图形软件里创建 icon图标, 比如下图: ?...推荐网站: http://www.iconfont.cn/ 阿里icon font字库 http://www.iconfont.cn/ 这个是阿里妈妈M2UX的一个icon font字体图标字库,包含了淘宝图标库和阿里妈妈图标库...fontello http://fontello.com/ 在线定制你自己的icon font字体图标字库,也可以直接从GitHub下载整个图标集,该项目也是开源的。...如果工作中,原来的字体图标不够用了,我们需要添加新的字体图标,但是原来的不能删除,继续使用,此时我们需要这样做 把压缩包里面的selection.json 从新上传,然后,选中自己想要新的图标,从新下载压缩包

3.8K20

Unity 图标字体

原文链接 这是一个关于在 unity 中从网络开发获取大量文件非常小的图标的简短提示。你所要做的就是打包所有你想在一种字体里使用的所有图标,那样你就可以这个图标作为文本保存到你的场景或是用户界面里了。...有许多服务可以构建图标字体,但是我喜欢 IcoMoon 提供的免费和付费的图标集以及易于使用的 app。...从 https://icomoon.io/app/ 开始,你可以从他们提供的免费图标来进行选择,包含到你自己的集合里。 ? 然后点击右下方『生成字体』按钮。 ?...为了使用它可以创建一个文本对象,然后在文本的字符属性里选择刚才的图标并且把它作为你的新字体。 ?...现在你拥有它,你可以打包成许多免费的图标,并且还可以在你的项目里使用它,甚至你都可以非常便宜地获得一些更炫的图标

2.2K20
  • 字体图标iconfont

    前端开发离不开图标,会有一部分直接使用图片引进,但是在性能上来说对用户体验不是很好。...字体图标:以字体文件的形式封装,并通过 CSS 的 @font-face 作为 Web Font 调用,达到简单图片的效果。 优点: 1、 轻量性,加载速度快,因为字体图标都非常小。...5、 可维护性,建立一个项目图标之后,可一直更新迭代。 缺点: 1、 与真正图片比起,效果不如图片。 2、 需要UI学习制作图标。 3、 不如图片那样容易重构。...字体图标使用不同公司项目要自己判断,这边推荐使用阿里字体图标: http://iconfont.cn/home/index 搜索需要的图标: ? 把想要的图标选中: ? 点击右上角: ?...后期如果添加修改图标,只需要重新下载覆盖之前的就可,对于原来的不会有影响。 (完)

    2.4K10

    Layui 字体图标

    layui 的所有图标全部采用字体形式,取材于阿里巴巴矢量图标库(iconfont.cn)。...Layui官方CDN (测试功能使用CDN就行,不用在下载layui到本地,这样就麻烦了) ---- https://www.layuicdn.com 字体图标显示,引入css就足够了,无需引入 layui.js...使用方式 ---- 推荐对 i 标签设定 class="layui-icon" 来定义图标 然后对 i 标签加上图标对应的 字体类名 或 unicode 字符,即可显示出字体图标 字体图标容器 字体图标没在容器中时则会被解析成HTML预留的字符实体,而不是layui的字体图标,所以浏览器上将显示为一个方框 <i class="layui-icon-fire...因为是<em>字体</em><em>图标</em>(<em>图标</em>本质是<em>字体</em>),所以可以通过css修改<em>图标</em>样式 ---- <i class="layui-icon layui-icon-fire" style="color:red;font-size

    1.4K30

    图标字体应用实践

    使用图标字体可以完美解决上面的问题 图标字体icon font 图标字体就是将图标作成一个字体,使用时与普通字体无异,可以设置字号大小、颜色、透明度等等,方便变化,最大优点是拥有字体的矢量无失真特点,同时可以兼容到...一个图标字体里面的元素 如何制作图标字体 需要准备PS和AI,打开UI图,选中图标的图层,通常它是设计师画的一个形状: ? ? 1....使用PSD to SVG增加便利 现在重点说下,图标字体的使用和一些注意事项 图标字体的使用 通过font-face导入自定义字体,可以参考字体下载后的demo。...图标字体的两种使用方法 其中,e9d3是当前图标在这个字体里面的十六进制编码。在普通字体里,0的编码是0x16,即48,为0的ascii编码。...另外icommon还提供了在线编辑的功能还有大量图标的搜索功能,商业版提供woff2字体下载。 图标字体的缺点 图标字体有一个显而易见的缺点,不支持多色图标。因为它是一个字体,决定了它只能是单色的。

    2.3K20

    Layui 扩展字体图标

    layui 目前(2020-06-28)提供了168个图标,但是很多时候这些图标中没有自己想要的,今天在项目中想找一个二维码的图标,但是在layui提供的图标中并没有,此时我们可以扩展图标(阿里巴巴矢量图标库...进入阿里巴巴矢量图标库官网,登陆账号 2. 下载图标 3. 三种使用方式 4. Font-class 使用示例 1....进入阿里巴巴矢量图标库官网,登陆账号 ---- 阿里巴巴矢量图标库官网 https://www.iconfont.cn 任选一种方式登陆账号,必须登陆,否则无法进行下载 2....下载图标 ---- 搜索想要的图标,滑过图标、加入购物车 点击 下载代码,得到一个zip压缩包 解压压缩包,得到一个文件夹 demo_index.html 示例文件,使用方法看该文件即可 3....三种使用方式 ---- Unicode 引用 (兼容性最好,单色图标) Font-class 引用 (兼容性良好,单色图标,单色推荐) Symbol 引用 (兼容性较差,彩色图标,彩色推荐) a.

    67930

    【CSS3】CSS3 伪元素字体图标 ( 生成 icommon 字体文件 | 字体图标基本使用 | 使用伪元素实现 icommon 字体图标显示 )

    一、icommon 字体图标基本使用 ---- 字体图标 指的是 将图标做成字体样式 , 在 放图标的地方 使用 文字 即可实现 图标显示 ; 1、生成 icommon 字体文件 进入 https://...icomoon.io/app/#/select 网站 , 选择 491 个字体图标 ; 在上述下拉菜单中 , 选择 Select All 选项 , 一次性选择所有的 491 个字体图标 ; 点击右下角的...Generate Font 按钮 , 生成字体图标 , 生成字体后 , 点击右下角的 Download 按钮 , 下载该文件 ; 解压该文件 , 可以得到如下内容 ; 将 fonts 目录拷贝到与...网页同级目录中, 该 fonts 目录是字体文件所在目录 , 下面的四个文件就是字体文件 ; 查看 icomoon 目录中的 demo.html 网页 , 里面有字体图标对应的编码 ; 下图中..., 房子对应的字体编码是 e900 , 右侧的  是字体的占位符 ; 2、字体图标基本使用 代码示例 : <!

    1.8K30

    iconfont字体图标

    字体相关知识 了解iconfont(字体图标)前我们先了解下字体,因为iconfont的实现与字体息息相关,所以掌握字体相关知识便于理解iconfont。接下来看一个简单的例子 <!...iconfont是什么 相信大家看到这边更进一步了解了网页字体的渲染流程,接下来我们来看看iconfont。 将iconfont拆开来看,就是icon(图标)和font(字体)。...简单的说iconfont就是利用字体工具把我们平时网页上用的图形图标转换成网页字体。...其实跟字体差不多,字体对应的是文本,iconfont对应的是图标 iconfont的实际应用 2.1 手机百度首页 ? 2.2 手机淘宝首页 ?...3、使用iconfont非常方便,和设置网页字体一样,可以利用CSS来定义图标大小、图标颜色、图标透明度等 iconfont的劣势 1、利用CSS无法方便的定义多彩的icon,大部分是单一颜色。

    5.4K60

    字体图标iconfont的使用

    1.将从阿里矢量图标库中图标并下载到本地 2.使用图标(三种使用方式) 1.使用 FontClass(最简单方式,支持字体样式定义但不支持多色字体) fontClass 支持字体的样式定义,但不支持多色字体...) 支持字体的样式定义,但不支持多色字体,兼容性最好,支持 IE6+,及所有现代浏览器。...支持按字体的方式去动态调整图标大小,颜色等等。 第一步:拷贝项目下面生成的 @font-face 引入以下文件: 注意需要将对应的文件引入,和注意修改引入文件时的路径。...font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } 第三步:挑选相应图标并获取字体编码...) 支持多色图标了,通过一些技巧,支持像字体那样,通过 font-size, color 来调整样式。

    4K20

    前端基础-CSS网站图标字体图标

    网站图标字体图标 1.网站图标 作用:一个好的ico图标可以加深用户对于网站的记忆。降低用户记忆成本,就好像现在说道熊爪大家都能够想到度娘,更多的属于用户体验。有利于识别当前窗口是在哪个网站。...2.字体图标 图片是一个选择,但是图片不但增加了总文件的大小,还增加了很多额外的"http请求"(服务器加载资源),这会大大降低网页的性能。...图片还有一个缺点就是不能很好的进行“缩放”,因此,有时候在网站中需要使用图像的最好解决方案就是不去使用图片-----而使用字体图标恰恰可以解决这一点。 示意图 ?...使用流程: ​ (1)打开网上的图标库,网址:http://www.iconfont.cn/,搜索需要的图标,或者打开图标库 ​ (2)将需要的图标加入购物车 ​ (3)打开购物车添加至自己的项目(没有的需要自己创建...将需要的图标加入购物车 示意图 ? 在购物车中将图标添加至项目 示意图 ? 有项目就选择,没有就新建 示意图 ? 下载至本地 示意图 ?

    5.8K40

    如何在系统中添加字体(添加字体系统)

    笔者最近在使用win10自带的OneNote笔记本记笔记的时候,发现笔者电脑中没有华文新魏这个字体,最开始以为是OneNote不带有这个字体,经过一段时间的收集资料后发现,是笔者电脑win10系统中不带有这个字体...,现将有关概念和字体安装方法做一下记录。...字体是win10系统自己带有的,其他的软件自能从win10系统中用调用,而不是字体是某些软件自带的,比如如果office的PPT中含有华文新魏这个字体,那么OneNote中就必然也含有华文新魏这个字体...,并不会存在一个软件有这个字体而另一个软件不含有这个字体的情况。...字体安装方法: 第一步,去百度上搜索字体并下载,如下图所示,搜索的时候就搜索xx字体即可,然后自行选择一个网站并下载: 要注意下载的文件后缀名为ttf格式,如图所示: 第二步,双击打开下载的文件

    3.9K30

    字体图标的绘制和使用技巧

    从事前端的朋友应该对“字体图标”这个词汇不陌生,为了适应越来越挑剔的屏幕,网页图标和简单图案使用 .png 来搭建已经基本上被淘汰了。...取而代之的是使用 css3 和 svg 来绘制,而对于网页小图标,我们更希望在整个系统的前端架构中将它们做成字体库统一管理。如下图: ?...如果在任意一个页面只需要引用一个 css 样式就能实现库中的任意一个图标,而且只需要定义 font-size 就能控制图标的大小,是不是很方便?...我是主后端的程序员,很早以前就在项目中使用过字体图标,但是之前用于制作图标库的 svg 都是美工帮我画好,所以一直没有深究其中的原理,直到近期不得不自己制作才对其好好研究了一下。...下面我从svg绘制和代码实现两方面将初次制作字体图标遇到的坎和大家分享一下,愿后来者不要入坑。

    1.4K100

    字体图标库使用方法

    一些字体图标库的网站 https://icomoon.io/app/#/select http://www.iconfont.cn/ http://www.bootcss.com/ http://www.bootcss.com.../p/cikonss/  以第一个链接网站里的字体为例 选择自己需要图标,点击右下角下载下来 ?...配置路径信息——在css中找到font文件夹并找到文件夹下的字体文件 ?...设置图标样式,给个统一的类名,全局调用,比如我这里设置的所有的i标签给一个icon的类名 类样式可以根据自己的项目写一些公共的 我这里直接复制的腾讯课堂的代码过来都可以用,所以说代码这里大同小异,具体不同的可以利用图标的名字...对应的图标类名,引到html图标标签的class处即可 ? 例如:  我这里要用第一个message的图标,我在html中这样引用: ? 另外我在css中设置其单独样式: ? 好了,大功告成! ?

    3.5K70
    领券