web字体和图标 web字体 字体图标

最新推荐文章于 2024-05-02 18:27:43 发布
最新推荐文章于 2024-05-02 18:27:43 发布
阅读量1k 收藏 1
点赞数
文章标签： css html5 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_55751104/article/details/128770673
版权

目录

web字体和图标

web字体

用户电脑上没有安装相应字体，强制让用户下载该字体（这个过程中，用户察觉不到）

使用@font-face指令制作一个新字体
在这里插入图片描述

字体图标网站

字体图标网站库： iconfont.cn
https://www.iconfont.cn/

图标使用方法（font class 版本（推荐））

在我的项目里查看图标
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

这里的复制代码，可以得到图标的类名
在这里插入图片描述
在这里插入图片描述

图标离线使用方法

把图标的css代码放入本地的css文件里，并进行引用
在这里插入图片描述

图标使用方法（Unicode 版本）

这种方式是远程读取字体文件
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

六行代码
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
探索WebFont：一款高效、灵活的网络字体管理工具
gitblog_00026的博客
04-20 356
探索WebFont：一款高效、灵活的网络字体管理工具 项目地址:https://gitcode.com/Linrstudio/WebFont 在网页设计中，字体的选择和加载是提升用户体验的重要一环。WebFont 是一个专为此目的打造的开源项目，它提供了一种智能且高效的网络字体解决方案，帮助开发者轻松管理和优化网页中的字体资源。 项目简介 WebFont 是一套完整的前端字体处理库，包含了一个浏...
web前端之CSS——web字体详解
weixin_46820017的博客
05-11 2615
前言 开发人员可以为自已的网页指定特殊的字体（将指定字体提前下载到站点中），无需考虑用户电脑上是否安装了此特殊字体。从此，把特殊字体处理成图片的方式便成为了过去。 支持程度比较好，甚至 IE 低版本的浏览器也能支持。 字体的常见格式 不同浏览器所支持的字体格式是不一样的，我们有必要了解一下字体格式的知识。 TureTpe格式：(.ttf) .ttf 字体是Windows和Mac的最常见的字体，是一种RAW格式。 支持这种字体的浏览器有IE、Firefox、Chrome、Safari、Opera Open
2024年大数据最全【Web前端】CSS-高级技巧_web字体图标示例(1)
最新发布
2401_84187635的博客
05-02 410
（ 默认 normal 自动换行）/* 5. 设置或检索伸缩盒对象的子元素的排列方式 *//* 4. 限制在一个块元素显示的文本的行数 *//*2. 文字用省略号替代超出的部分 *//*3. 文字用省略号替代超出的部分*//* 3. 弹性伸缩盒子模型显示 *//*1. 先强制一行内显示文本*//*1. 超出的部分隐藏 *//*2. 超出的部分隐藏*/
Web前端——字体图标
Singe_lq的博客
07-03 362
important;
web中使用自己想要的字体
like_a_diamond的博客
10-17 2215
找一个字体库下载字体解压后添加到文件夹。
web前端开发——进阶css（字体图标）
m0_59451453的博客
04-11 210
（没有图找设计师要svg 上传矢量图去除颜色）
移动Web网页开发——字体图标
m0_45659764的博客
03-27 513
一、字体图标 1.1 字体图标的具体使用 将iconfont文件夹放在代码根目录 步骤： 引样式表 调用类名 注意： 如果是通过类名来实现字体的效果，就不能使用标签选择器来设置字体了，因为标签选择器的权重小于类选择器 案例：淘宝购物车 布局标签 li > span*3 字体图标 引入字体图标样式表 购物车和箭头span调用字体图标类名 1.2 上传矢量图 思考：如果图标库没有项目所需的图标怎么办 答：IconFont网...
html5字体代码列表,html5——web字体(示例代码)
weixin_39630498的博客
06-18 1515
基本介绍1、自定义网页特殊字体，无需考虑用户电脑上是否安装了此特殊字体，从此把特殊字体处理成图片的时代便成为了过去。2、支持程度比较好，甚至IE低版本浏览器也能支持。字体格式1、.eot格式：IE专用字体，支持浏览器IE4+2、.ttf格式：Windows和Mac的最常见的字体，是一种RAW格式，支持浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、i...
前端学习（205）:animation动画库
歌谣的博客
12-24 413
动画库 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-e...
『精品素材』20套免费的Web图标字体素材
全栈空间
06-29 587
作为一个Web设计师，图标设计是最耗时的任务之一，但幸运的是网络上有很多慷慨的设计师分享的现成的免费小图标素材包可以下载使用, 这些图标其实不是图片而是字体, 他们属于U...
Web前端之字体
花&败
10-28 4626
在网页中经常需要使用一些图标，可以通过图片来引入图标但是图片大小本身比较大，并且非常的不灵活，所以在使用图标时，我们还可以将图标直接设置为字体，然后通过@font-face的形式来对字体进行引入，这样我们就可以通过使用字体的形式来使用图标。
WEB字体
weixin_46022982的博客
05-07 262
2 WEB字体 2.1 web 字体基本语法 @font-face { font-family: 'diyfont'; src: url('diyfont.eot'); /* IE9兼容模式 */ src: url('diyfont.eot?#iefix') format('embedded-opentype'), /* IE9 - */ url('diyfont.woff') format('woff'), /* chrome、firefox opera saf
WEB前端网页设计-Bootstrap 字体图标(Glyphicons)
君逍遥o
04-09 770
字体图标是在 Web 项目中使用的图标字体。虽然，Glyphicons Halflings 需要商业许可，但是您可以通过基于项目的 Bootstrap 来免费使用这些图标。
字体图标的引入方式(阿里巴巴字体库的使用)
m0_72852527的博客
07-20 840
字体图标的使用
web字体和字体图标
qq_43952245的博客
08-08 412
web字体和图标 web字体 用户电脑上没有安装相应字体，强制让用户下载该字体 使用@font-face指令制作一个新字体 格式如下： /* 制作一个新的字体，名称叫做good night */ @font-face { font-family: "good night"; src: url("./font/晚安体.t...
CSS3渐变、web字体、字体图标
m0_60376759的博客
04-11 786
CSS3渐变：可以使用 CSS 代码创建一个渐变，渐变会被 CSS 当做图片。 要使用渐变必须通过使用图片的 CSS 属性，如 background-image。 1.线性渐变 /* 多个颜色之间的渐变， 默认从上到下渐变 */ linear-gradient(red, green); linear-gradient(red, yellow, green); /*设置线性渐变的方向*/ /* 使用关键字 to left、to top、 to right、to bottom、to left top、
web字体库加载优化_优化Web字体以提高性能：最新技术
culi3118的博客
08-21 1507
web字体库加载优化This article is part of a series created in partnership with SiteGround. Thank you for supporting the partners who make SitePoint possible. 本文是与SiteGround合作创建的系列文章的一部分。 感谢您支持使SitePoint成为可能...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值