css鼠标样式 css鼠标选中样式
2023-04-22 18:37 ca 蜻蜓知识 浏览: 2973 作者: tiger
大有学问 搜索创作挑战赛
什么是字体图标?
在html代码中是以文字元素的形式出现,但在网页渲染时却以图片的形式显示的小图标就叫做字体图标。
常见形式:地址、电话、登录窗口的头像等。
字体图标与精灵图对比
字体图标比精灵图更为轻量化,在网页中加载速度更快;
精灵图在实际使用中,图片放大或缩小时图片会失真。
精灵图是一张多个图标整合的一个大图片,后续添加或修改图标不方便。
注:
虽然字体图标好处多多,但是它并不能替代精灵图。
当小图标形式简单且个数较少时适合使用字体图标;
当小图标形式复杂且个数较多时适合使用精灵图。
字体图标哪里来?
icomoon网站:http://icomoon.io/。
阿里iconfont字库:http://www.iconfont.cn/。
字体图标使用方法
以icomoon网站为例。
从网站中下载图标压缩包:点击右上角“IcoMoon App”按钮,进入字体图标选择页面。
icomoon网站首页
选中需要的图标(选中状态的图标,背景颜色会变白且出现黄色边框)后,个数可以选择1个,也可以选择多个。选好图标后,点击右下角“Generate Font ”按钮进入下载页面。
字体图标选择页面
点击右下角“download”按钮进行下载。
icomoon网站图标下载页面
解压下载好的压缩包。
字体图标下载文件解压后的文件夹
将解压好的文件夹整体添加到项目文件夹中,我没有单独设置字体文件夹,直接放在素材图片文件夹了。
项目文件夹目录
打开字体图标文件夹中style.css,
复制字体声明到html文件的style样式中,改变url的图标文件存放位置。
span标签中字体样式需要与字体声明中样式保持一致。
字体图标调用
在html文件中,span标签的内容是需要从网站中直接粘贴复制过来使用。在网站下载页面,鼠标点击就是选中状态,直接ctrl+c复制即可。
字体图标的代码样式调用
如此就是完整的字体图标使用过程。另外有阿里iconfont也可以使用,也是免费的。有兴趣可自行了解。
字体图标代码示例
<style>
/* 字体声明 :从下载字体图标的文件夹中style.css文件上复制过来的*/
@font-face {
font-family: &39;icomoon&39;;
src: url(?toutiao/&);
src: url(?toutiao/&) format(&39;embedded-opentype&39;),
url(?toutiao/&) format(&39;truetype&39;),
url(?toutiao/&) format(&39;woff&39;),
url(?toutiao/&) format(&39;svg&39;);
font-weight: normal;
font-style: normal;
font-display: block;
}
span {
font-family: &39;icomoon&39;;
font-size: 100px;
color: antiquewhite;
}
</style>
span标签的内容就是从字体图标上粘贴下来的
代码运行效果图
好了,今天的学习就到这里了,下回学习CSS三角~
版权声明
本文仅代表作者观点,不代表蜻蜓百科-做你身边的百科发动机立场。
本文系作者授权蜻蜓百科-做你身边的百科发动机发表,未经许可,不得转载。